1、v-on/@
绑定事件
<button v-on:click="add">点击</button>
<button @click="add">点击</button>
阻止事件冒泡
<button @click.stop="add($event)">点击</button>
阻止事件默认行为
<button @click.prevent="add">点击</button>
事件只执行一次
<button @click.once="add">点击</button>
只有event.target表示自身元素时，才会触发函数
<div v-on:click.self="doThat">点击</div>
表示添加事件捕获模式
<div v-on:click.capture="doThis">点击</div>
2、v-bind
动态数据
<div v-bind:title="msg">动态数据</div>
<div :title="msg">动态数据</div>
3、v-for
遍历数据
（1）遍历数组，v表示元素，i表示对应的索引
<p v-for="(v, i) in arr">{{v}} {{i}}</p>
（2）遍历对象，v表示属性值，i表示对应的属性名称
<p v-for="(v, i) in arr">{{v}} {{i}}</p>
（3）遍历数值，v表示数字，i表示对应的索引
<p v-for="(v, i) in num">{{v}} {{i}}</p>
4、v-text
<p v-text="'填充内容'"></p>
5、v-html
<p v-html="'<span>填充标签或内容</span>'"></p>
6、v-cloak
解决页面闪烁问题：v-text、v-html、v-cloak
[v-cloak]{
display:none
}
<p v-cloak>{{msg}}</p>
7、v-if和v-show
<p v-if="flag==0">flag为0时，显示该内容</p>
<p v-else-if="flag==1">flag为1时，显示该内容</p>
<p v-else>否则显示该内容</p>
<p v-show="flag">flag为true时，显示该内容</p>
二者区别：
v-if是通过创建标签和删除标签来控制内容的显示和隐藏
v-show是通过控制display属性来控制标签的显示和隐藏
8、v-model
获取表单控件中的值，修饰符lazy、trim、number
lazy：表示失去焦点时触发
trim：表示去除字符串两端的空白字符
number：表示只能输入数字
输入框 v-model的值是字符串 val : ''
<input type="text" v-model="val" />
单个复选框 v-model的值是布尔值 flag : true
<input type="checkbox" v-model="flag" />{{flag}}
也可以修改显示的值,选中toggle是yes，没有选中是false，toggle: 'yes'
多个复选框 v-model的值是一个数组 flag : ['xj']
<input type="checkbox" v-model="flag" value="pg" />苹果
<input type="checkbox" v-model="flag" value="xj" />香蕉
<input type="checkbox" v-model="flag" value="jz" />橘子
<input type="checkbox" v-model="flag" value="xg" />西瓜
单个单选框 v-model的值是字符串 radioVal： 'man'
<input type="radio" v-model="radioVal" value="man">男
多个单选框 v-model的值是value的值或为空字符串 radioVal：''
<input type="radio" name="sex" v-model="radioVal" value="man">男
<input type="radio" name="sex" v-model="radioVal" value="woman">女
下拉框v-model的值表示选中option的value值或内容值 val：'上海'
<select v-model="val">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
val : 'sh'
select v-model="val">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
9、v-once
{{msg}}
<p v-once>{{msg}}</p> // 只在初始化时，渲染一次，后面数据变化，上面的数据会更新，p标签内的不会更新