好的，今天我们来学习一下Vue指令。
1，v-bind指令
作用：动态的设置html的标签属性
语法：v-bind:titile="msg"
简写：:title="msg"
注意点：v-bind访问的值，必须在data中存在
2，v-model指令
作用：在变淡元素上创建双向数据绑定
双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
数据的改变会引起DOM的改变
DOM的改变也会引起数据的改变
原理：数据劫持，object.defineproperty中的get和set方法
注意：object.defineproperty方法是ES5中提供的，IE8浏览器不支持这个方法，因此，Vue不支持IE8及以下浏览器
3，Vue双向绑定的极简实现
<!-- 示例 -->
<input type="text" id="txt" />
<span id="msgBox"></span>
<script>
const txt = document.getElementById('txt')
const msgBox = document.getElementById('msgBox')
const obj = {
}
// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
// 设置 obj.msg 执行的操作
set: function (curVal) {
txt.value = curVal
msgBox.innerText = curVal
}
})
// 监听文本框的改变
txt.addEventListener('input', function (event) {
obj.msg = this.value
})
</script>
3,v-on指令
作用：绑定事件
语法:v-onclick="say"或v-onclick="say('参数'，$event)"
简写 ：@click="say"
说明：绑定的事件从methods中获取
<button @click="Function($event)">按钮</button> //简写 获取事件对象
4，事件修饰符
.stop阻止冒泡，调用event.stopPropagation()
.prevent阻止默认行为，调用event.preventDefault()
.capture添加事件侦听器时使用事件捕获模式
self只当事件在该元素本身（比如不是子元素）触发时，才会触发的事件。
once事件只触发一次
5，按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值，Vue允许为v-on在监听键盘事件时添加键盘修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
6，v-text指令
解释：更新元素的文字内容。如果需要更新部分的内容，需要使用
{ {}}插值
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{
{
msg}}</span>
7，v-for
作用：基于源数据多次渲染元素模块
<!-- 1 基础用法 -->
<div v-for="item in items">
{
{
item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{
{
item}} -- {
{
index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{
{
item}} -- {
{
key}}</p>
<p v-for="item in 10">{
{
item}}</p>
8，key属性
推荐：使用
v-for的时候提供key属性，能够提升列表渲染的性能！
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
9，v-if和v-show
v-if：根据表达式的值的真假条件，销毁或重建元素。
v-show：根据表达式的真假值，切换元素的display css属性、
10，样式处理-class和style
使用方式：
v-bind:class="flag"或:calss="flag"表达式的类型：字符串，数组，对象
语法:
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
11，提升性能：v-pre
说明：跳过这个元素和它的元素的编译过程。可以用来显示原始{ {}}标签，跳过大量没用的指令节点加快编译。
<span v-once>This will never change: {
{
msg}}</span>
好了，vue的指令常用的就这些了。