1，差值表达式{{}}
1 <p >{{ msg }}</p>
2、v-cloak解决差值表达式闪烁的问题
<p v-cloak>{{ msg }}</p>
3、v-text是没有闪烁问题的。
1 <h4 v-text="msg"></h4>//注意：v-text会覆盖元素中的原本的内容，差值表达式只会替换自己的这个占位符 3 <h4 v-text="msg">=======</h4>//等于号将会被替换掉
4、 v-html也会覆盖元素原本的内容，但是可以解析出HTMl标签。
5、 v-bind: 是Vue中提供的用于绑定属性的指令。
简写形式为 ：只能实现数据的单项绑定，由M 自动绑定到 V中。无法实现数据的双向绑定。
<input type="button" value="按钮" v-bind:title="mytitle">//这里的mytitle是一个在data里面定义的一个变量
6、v-on是事件绑定机制。简写形式为@
<input type="button" value="按钮" v-on:click="show">//show是在new Vue里面的methods属性中的可用的方法，事件处理函数
7、v-model是唯一的实现数据双向绑定。
表单元素可以和用户进行交互。该指令可实现 表单元素和 Model中数据的双向绑定。但是仅限于表单元素input（radio/text/addresss/email） select checkbox textarea
8、v-if和v-show的区别
v-if每次都会重新删除或创建元素。具有较高的切换性能的消耗。
v-show每次不会重新进行Dom的删除和创建操作，只是切换了元素的display：none样式，具有较高的初始渲染消耗
9、v-for可以做一些循环操作。
1循环普通数组：要先写每一项item，再写索引i
<p v-for="(item,i) in list1">索引：{{i}}----每一项：{{item}}</p>
其中普通数组是定义在data上的list1如下
list1: [1,2,3,4,5]
2循环对象数组
<p v-for = "(item,i) in list2">ID: {{item.id}}---名字：{{item.name }}---索引：{{i}}</p>
其中，list2是定义在data上的对象数组
list2: [
{ id:1, name: 'zs1'},
{ id:2, name: 'za2'},
{ id:3, name: 'zs3'}
],
3循环对象
<p v-for = "(val, key, i) in user">值是：{{val}}---键是--{{key}}--索引是：{{i}}</p>
user:{ id:1, name:'托尼*屎大颗', gender: '男' }
4迭代数字
<p v-for = "count in 10 ">这是第 {{ count }} 次循环</p>
注意：在v-for循环的时候，应该尽量指定key属性，且只能使用number或者string类的，例如下面的事例中，给ID框和Name文本框写入数据之后实现页面的同步。
例子：添加Name和ID
#app部分为如下：
1，页面上的数据是由用户输入的，因此需要v-model双向数据绑定。v-model的作用是，1，将用户输入的数据同步到data中2，同步到data中的数据（使用）通过methods中的业务逻辑同步到页面上。
<div id="app"> <div> <label >ID: <input type="text" v-model = "id"> </label> <label >Name: <input type="text" v-model = "name"> </label> <input type="button" value="添加"@click="add"> </div> <p v-for = "item in list":key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</p> </div>
vm是一个新的事例。el 是指定的要控制的区域。 data 是个对象，指定了控制的区域里面要用到的数据。methods 虽然带个s后缀，但是是个对象，可以自定义方法。 在vm实例中，如果要访问 data 上的数据，或者要访问methods中的方法，必须带上this。
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{ id:1, name:'刘亦菲'},
{ id:2, name:'刘昊然'},
{ id:3, name:'柳岩'},
{ id:4, name:'刘德华'}
]
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name})
}
}
})