本文结合代码，讲解一些 vue 常见的指令及其用法，注意：
指令会影响元素的渲染行为
指令始终以“v-”开头
1、v-text
设置标签内容（v-text 指令会覆盖元素内默认的值）
<!-- 把 username 的值，渲染到 p 标签中 -->
<p v-text="username"></p>
2、{{ }} 插值表达式
vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{}} 语法的专业名称是插值表达式（英文名：Mustache）
<!-- 把 username 和 gender 的值，渲染到 p 标签中，同时保留元素自身的默认值 -->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
除了支持绑定简单的数据值之外，还支持 javascript 表达式的运算
<template>
<!-- 数值运算 -->
<p> {{ num + 1 }} </p>
<!-- 字符串拼接 -->
<p> {{ str1 + str2 }} </p>
<!-- 三元运算 -->
<p> {{ num>0 ? num : '无数据' }} </p>
<!-- 字符串方法，输出：CBA -->
<p> {{ name.split('').reveser().join('')}} </p>
</template>
<script>
export default {
data() {
return {
str1: '名',
str2: '称',
num: 10,
name: 'ABC'
}
}
}
</script>
3、v-html：设置元素的 innerHTML，比如在页面中输出“<h1>标题</h1>”
带 html 标签的内容，比如上面的：var title = '<h1>标题</h1>'，在 Vue 中使用 mustache 模板引擎的 {{title}} 进行渲染时，html 标签会被编码并直接输出到页面，使用 v-html 指令就可以将标签作为 html 的一部分显示出来
注意：该指令会导致元素的模板内容失效
<template>
<!-- 下面通过两个大括号渲染：，p 标签也会被当做字符串输入到页面 -->
<div>{{content}}</div>
<!-- 正确渲染方法-->
<div v-html="content"></div>
<!-- 若元素中有内容，使用 v-html 后将失效-->
<div v-html="content">div 中原有的内容，使用 v-html 后将被替换成新内容</div>
</template>
<script>
export default {
//定义变量 content 的值
data: {
content: '<p style="color:red">我是P标签</p>';
}
}
</script>
4、列表渲染指令：v-for
语法：
v-for = "(item, index) in items"
其中：
具体用法：
注意：当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的key属性，使用key来维护列表的状态
key的注意事项：
1、key的值只能是字符串或数字类型
2、key的值必须具有唯一性（即：key的值不能重复）
3、建议把数据项中的主键做为key的值（比如id）、
4、遍历时使用下标（比如index）的值当做key的值没有任何意义
5、建议使用v-for遍历时一定要指定key的值（提升性能、防止列表状态紊乱，vue新版本已强制要求）
<button @click="add_check">添加一列</button>
<div v-for="item in check" :key="item.id">
<span>{{item.name}}</span>
<input type="checkbox" />
</div>
//在此案例中，不添加:key="id"的情况下，选中checkbox后再点击添加一列，会导致选中的checkbox错位
data() {
return {
check: [
{id:1, name:'姓名', checked:false},
{id:2, name:'年龄', checked:true}
]
}
},
methods: {
add_check(){
this.check.unshift({id:3, name:'性别', checked:false});
}
}
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏，条件渲染指令有两个，分别是：v-if、v-show
条件渲染指令：v-if、v-else-if、v-else
条件渲染指令，控制元素可见度：v-show
v-if 和 v-show 的区别
实现原理不同：
性能消耗不同：
v-if有更高的切换开销，而v-show有更高的初始渲染开销
v-bind：绑定属性
HTML标签自带的属性或Vue一些特殊属性，如：
这些属性值无法通过 {{变量}} 进行渲染赋值，Vue提供了 v-bind 用于属性绑定，如：
v-bind可以简称成冒号，如：
v-on
注册事件，该指令由于十分常用，因此提供了简写形式"@"，即：v-on:事件 = @事件
原生DOM对象如：点击onclick、键盘松开oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup。
通过v-on绑定的事件处理函数，需要在methods节点中进行声明。当代码过于简单时，可以不声明函数，将表达式直接写在v-on中。
事件对象$event
在原生的DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。同理，在v-on指令所绑定的事件处理函数中，同样可以接收到事件对象event。
比如下面的例子，点击改变按钮颜色：
<button @click="changeColor"></button>
methods: {
changeColor(e) { // 接收事件对象event，简写为e
e.target.style.backgroundColor = e.target.style.backgroundColor == "yellow" ? '' : "yellow";
}
}
$event是vue提供的特殊变量，用来表示原生的事件参数对象event。$event可以解决事件参数对象被覆盖的问题。
事件对象$event会被自动传递，默认为第一个参数，无其它参数得到情况下，调用函数时可不携带事件对象，比如：@click="func_name" 和 @click="func_name($event)" 是一样的，若函数有其它参数，事件对象将被覆盖，使用事件对象需要在调用函数时传入$event，比如：
<button @click="changeColor(num, $event)"></button>
methods: {
changeColor(num, e) { // 接收事件对象event，简写为e
console.log(num)
e.target.style.backgroundColor = e.target.style.backgroundColor == "yellow" ? '' : "yellow";
}
}
事件修饰符
事件支持一些指令修饰符，如：prevent、stop。prevent可以阻止元素的默认行为，比如阻止a标签的跳转，使用方法：@click.prevent="fun_name"，stop阻止冒泡，常用的5个事件修饰符如下：
<!-- 阻止默认行为，此时点击span并不会触发外层的跳转 -->
<a href="https://www.baidu.com/">
<span @click.prevent="func()"></span>
</a>
<!-- 阻止冒泡，此时点击func2并不会触发父级的func1 -->
<div @click="func1">
<div @click.stop="func2">点击</div>
</div>
<!-- 通过.capture先触发外面的div，再出发里面的div -->
<div @click.capture="outside" style="width:300px;height:130px;padding:10px;border:1px solid red;">外面的DIV
<div @click="inside" style="width:100px;height:100px;border: 1px solid blue;">里面的DIV</div>
</div>
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，包括组合按键修饰，例如：
<!-- 只有在key是Enter时调用submit方法 -->
<input type="text" @keyup.enter="submit">
<!-- 只有在key是Esc时调用quit方法 -->
<input type="text" @click.esc="quit">
<input type="text" placeholder="在此处按tab触发下个input的tab事件" /><br>
<input type="text"
@keyup.enter="enkey('Enter回车键')"
@keyup.esc="enkey('esc退出键')"
@keyup.tab="enkey('tab键')"
@keyup.delete="enkey('del键')"
@keyup.space="enkey('空格键')"
@keyup.up="enkey('上箭头键')"
@keyup.down="enkey('下箭头键')"
@keyup.left="enkey('左箭头键')"
@keyup.right="enkey('右箭头键')"
@keyup.shift.a="enkey('shift+A键')"
@keyup.ctrl.s="enkey('ctrl+S键')"
placeholder="按键测试" />vue按键修饰符<br>
<input type="text" />
鼠标事件监听
<input type="text"
@mousedown="mouse('鼠标按下事件，按tab键切换input聚焦无效')"
@mouseup="mouse('鼠标释放事件')"
@mousemove="mouse('鼠标移动事件')"
@mouseover="mouse('鼠标移入')"
@mouseout="mouse('鼠标移出')"
@mouseenter="mouse('鼠标进入（不冒泡）')"
@mouseleave="mouse('鼠标离开（不冒泡）')"
@contextmenu="mouse('右键菜单')"
placeholder="鼠标事件测试" />
v-model：双向数据绑定，只能用于表单元素，用来辅助开发者在不操作DOM的前提下，快速获取表单数据
通过v-bind和v-on结合，也能实现相同的效果，所以v-model等于是v-bind和v-on的复合版
为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：
用法如下：
<div style="margin-top: 20px">v-model指令修饰符</div>
姓名：<input type="text" v-model.lazy="user.name" placeholder="将input改为change" /><br>
年龄：<input type="text" v-model.number="user.age" placeholder="自动将用户输入值转为数值类型" /><br>
性别：<input type="text" v-model.trim="user.gender" placeholder="自动过滤空格" /><br>
15601023311
