Vue基础语法介绍

什么是Vue?
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js借鉴了Angular以及React的一些核心思想,综合各自的长处进行了操作以及性能等方面的优化,进而打造出一款性能更优,学习更容易的MVVM框架。
它的作者是:尤雨溪
vue对比angularjs
1、vue在设计之初参考了很多angularjs的思想(angjularjs != angular)
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧,运行速度快
4、 vue与angular数据绑定都可以用{{}}
5、vue指令用v-xxx angularjs用ng-xxx
6、vue数据放在data对象里面,angular数据绑定到$scope对象上
vue对比react
1、vue与react都使用 virtual DOM(虚拟DOM)
2、vue与react都提供了组件化的视图组件
3、 vue与react将注意力集中保持在核心库,有丰富的插件库
4、react使用jsx渲染页面,vue使用更简单的模版
5、vue比react运行速度更快
vue基础语法
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var vm=new Vue({})
基础属性:
el:获取执行vue的dom元素-初始化范围
data : 存储数据
methods :执行的方法
Vue基础语法介绍_第1张图片

1)绑定数据
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html angular中 ng-bind-html vue中 v-html(专门处理带标签的)
表达式 在{{}}中 ±*/ 直接可用 三木运算一样可用
Vue基础语法介绍_第2张图片

2)事件绑定
v-on:click=“” 或者 @click=“”
绑定事件 --事件中有event对象 函数参数为 $event
操作数据 通过this操作
methods:专门写函数的
Vue基础语法介绍_第3张图片

Vue基础语法介绍_第4张图片

event对象

Vue基础语法介绍_第5张图片

3)其他指令
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
在这里插入图片描述
v-model=“” 表单元素value 不可直接{{}}获取,需在vue初始化设置一下
在这里插入图片描述
单选框的话两个v-model值必须一样
多选框的value值是一个布尔值
Vue基础语法介绍_第6张图片
v-model永远指向表单元素的value值,
Vue基础语法介绍_第7张图片
v-if 布尔值 为false 代表节点消失(有更高的渲染开销)
-if 与 v-else-if v-else 可以构成判断(必须要连着一块写)
在这里插入图片描述
-show布尔值 为false代表节点设置了display:none属性
无v-hide (不要任意猜测)
-once 一次渲染
v-if和v-show的区别
Vue基础语法介绍_第8张图片

行间样式设置
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
v-bind可以省略不写
data: {
activeColor: ‘red’,
fontSize: 30
}
v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个JavaScript对象
数组样式形式设置
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
styleObjectA: {
color: ‘red’
},
styleObjectB: {
fontSize: ‘30px’
}
}
类名设置

  1. v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
    

Isa isb 值为true 添加相应类名
为false 不添加类名
2)对象形式设置

classobj:{ active:true, 'class-a':true, 'class-b':true } 初识vue bootstrap+vue实现todolist ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190101160527620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjk3MzM4,size_16,color_FFFFFF,t_70) vue基础语法

绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法
(src title class name等属性写法一样)
计算属性 放在computed:{//函数} 效率高 methods设置效率低
1.在模板中表达式非常便利,但是它们实际上只用于简单的操作。
2.模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
在 Vue.js 中,你可以通过 computed 选项定义计算属性

	利用计算属性  (computed)

Vue基础语法介绍_第9张图片
实现金额结算
Vue基础语法介绍_第10张图片
实现筛选数据
Vue基础语法介绍_第11张图片
监听
第一种写法vm.$watch(‘’,function( newvalue,oldvalue){ })
Vue基础语法介绍_第12张图片
第二种写法 直接在vue初始化中通过
watch{msg:function(newvalue,oldvalue){}}
Vue基础语法介绍_第13张图片
过滤器----变换输出形式
Vue.filter(‘过滤器名字’,function(value){
return //具体操作
})
Vue2.0自定义过滤器,vue1.0提供内置
Vue基础语法介绍_第14张图片
Vue基础语法介绍_第15张图片

获取数据
vue全家桶(vue+axios+router+vuex)

  1. 应用fetch或axios 获取数据 axios 是vue2.0
    插件网址 https://github.com/mzabriskie/axios
    需要引入 axios.js
    Eg:get方式
    var _that=this; /注意this的作用域/
    axios.get(url)
    .then(function (response) {
    console.log(response.data.result);
    _that.list=response.data.result;
    })
    .catch(function (error) {
    console.log(error);
    });
    Vue基础语法介绍_第16张图片
    Vue基础语法介绍_第17张图片

vue1.0用法(知道就行)
github 搜索 resource https://github.com/pagekit/vue-resource

Eg:百度接口
var api=‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php’;
var that=this;
this.$http.jsonp(api,{
jsonp:‘cb’
}).then(function(data){
console.log(data.body);
that.list=data.body.s;
},function(){
//错误失败信息
})
fetch用法
先在bootcdn中引用fetch.js
Vue基础语法介绍_第18张图片
Vue基础语法介绍_第19张图片
第一个then处理数据的,要对数据进行类型的转换
第一个then获取数据的

你可能感兴趣的:(vue)