1、指令概念
指令 (Directives) 是带有 v- 前缀的特殊attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for指令 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
v-if指令：将根据表达式seen的值的真假来插入/移除<p>元素。
2、指令参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
v-bind：
// v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>//简写
<a :href="url">...</a>//作用：动态的设置html的属性，数据绑定操作
//语法：v-bind:msg="title"
//简写：:msg="title"在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
v-on：
// v-on 指令，它用于监听 DOM 事件
<a v-on:click="doSomething">...</a>// 简写
<a @click="doSomething">...</a>//1 v-on:事件名=“要执行的少量代码"
//2 v-on:事件名=“函数名"
//3 v-on:事件名=“函数名(实参)"在这里参数是监听的事件名，告知 v-on指令是绑定事件（方法）的指令，v-on是单击效果的事件。
3、指令动态参数
从 2.6.0 版本之后，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
v-bind：
// 注意：参数表达式的写法存在一些约束
<a v-bind:[attributeName]="url"> ... </a>// 例Vue 实例有一个 data property attributeName，其值为 "href"
// 那么这个绑定将等价于 v-bind:href。
<a v-bind:href="url"> ... </a>
//简写
<a :href="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为
null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。
例如：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
避免使用大写字符来命名键名
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
v-on：
<input v-on:[eventName]="doSomething"> ... </input>// 例Vue 实例有一个 data property eventName，其值为 "focus"
// 那么这个绑定将等价于 v-on:focus。
<input v-on:foucs="doSomething"> ... </input>
//简写
<input @foucs="doSomething"> ... </input>在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
4、指令修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
// 1、事件修饰符
<form v-on:submit.prevent="onSubmit">...</form>
//简写
<form @submit.prevent="onSubmit">...</form>// 2、键盘修饰符
// 只有按键为keyCode的时候才触发
<el-input type="text" @keyup.keyCode="shout()"></el-input>// 3、鼠标按键修饰符
// 按下鼠标左键
<el-button @click.left="shout(1)">ok</el-button>// 4、表单修饰符
// 自动过滤用户输入的首尾空格字符，中间的空格不会过滤
<el-input type="text" v-model.trim="value"></el-input><!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div><input @keyup.13="submit">事件修饰符：
1、.stop：阻止事件冒泡
2、.prevent：提交事件不再重新加载页面，可以用来阻止表单提交的默认行为
3、.once：点击事件只会触发一次
4、.native：使用时将被当成原生HTML标签看待
键盘按键修饰符：
1、@keyup：键盘抬起
2、@keydown：键盘按下
3、按键码：在键盘修饰符后面添加.xxx，用于监听按了哪个键
常用按键码：.enter，.tab，.delete，.esc，.up，.down，.space等。
表单修饰符：
1、.lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示；
2、.trim：过滤表单输入时两边的空格；
3、.number：限制输入数字或将输入的数据转为数字
鼠标按钮修饰符：
1、.left左键点击
2、.right右键点击
3、.middle中键点击
5、指令缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。
当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，
因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写：
<!-- 完整语法 -->
<a v-bind:href="url">...</a><!-- 缩写 -->
<a :href="url">...</a><!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>v-on缩写：
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a><!-- 缩写 -->
<a @click="doSomething">...</a><!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>符号 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。
