指令

Guitar大约 5 分钟

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue的所有指令都以v-开始，以HTML标签的属性形式存在（自定义属性），指令告诉vue如何编译这个标签子模板。

当vue实例托管了一个容器后，便会解析所有的指令，从而将v-从真实DOM中移除。

<span 指令是写在这里的>{{这里是插值语法的位置}}</span>

指令的完整语法：v-指令名:参数="vue表达式"。

不是所有的指令都有参数和表达式。如果指令需要，那么一定遵从上述语法。
旧版本中，指令（可能）也可以使用{{}}进行插值，但这样不合适，现版本已经不能这样了，会报错。

编译之前，浏览器会先渲染模板，HTML语法会先于vue进行检错，vue托管后才会将vue解析的真实DOM替换容器所在的HTML。

动态参数

从 2.6.0 开始，可以用方括号括起来的 vue表达式 作为一个指令的参数。

<a v-bind:[attributeName]="url"> ... </a>

<!--
如果绑定的 Vue 实例有一个 property 为 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
-->

<a v-on:[eventName]="doSomething"> ... </a>
<!--当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus-->

动态参数预期会求出一个字符串，异常情况下值为 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-once

v-once：只渲染元素一次。

随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-if

v-if="表达式"：进行条件渲染。

表达式的执行结果需要是一个布尔类型的数据：true或者false。

true：这个指令所在的标签，会被渲染到浏览器当中。false：这个指令所在的标签，不会被渲染到浏览器当中。

v-html

v-html="表达式"：HTML插值。将表达式的结果作为HTML渲染，并替换标签体。相当于.innerHTML。

v-text

v-text="表达式"：文本插值。将表达式的结果作为普通文本渲染，并替换标签体。相当于.innerText。

v-bind

v-bind:参数="表达式"：动态属性值。让HTML标签的某个属性的值产生动态的效果。

编译前：<HTML标签 v-bind:参数="表达式"></HTML标签>

编译后：<HTML标签参数="表达式的执行结果"></HTML标签>

指令的参数即标签的属性名。
表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。（连带效果）
是单向数据绑定，只有当data发生改变时，才会进行更新，data ===> 视图。

简写形式：v-bind:参数="表达式" =>:参数="表达式"。（省去指令名部分）

实现上，指令参数是可以随意的，结合应用情景，参数为标签支持的属性才是有意义的，不然就只是增加了一个自定义属性。

v-model

v-model:参数="表达式"：双向数据绑定。用以进行用户数据交互，如接受用户输入。

v-bind可以使用在任何HTML标签当中。v-model只能使用在表单类元素上，如input、select、textarea。不然报错v-model is not supported on this element type。
一般情况下，无论指令参数是什么，v-model指令都是作用在value属性上面的，最终都是：v-model:value="表达式"。
是双向数据绑定，data <===> 视图。

简写形式：v-model="表达式"

checkbox 中的 v-model：

旅游<input type="checkbox" name="interest" value="travel">
运动<input type="checkbox" name="interest" value="sport">
唱歌<input type="checkbox" name="interest" value="sing">
<!------------------->
旅游<input type="checkbox" v-model="interest" value="travel">
运动<input type="checkbox" v-model="interest" value="sport">
唱歌<input type="checkbox" v-model="interest" value="sing">

// 将 checked 属性为 true 的checkbox的 value 组合成一个数组，作为 v-model 绑定的属性值（无需给出name，按 v-model绑定的属性进行分组）
// v-model 作用于 name
// 如：
data : 
	{
		interrest = []
	}
interest = ['travel','sport','sing']

select 元素中的 v-model：

<select name="grade">
	<option value="">请选择学历</option>
    <option value="zk">专科</option>
	<option value="bk">本科</option>
	<option value="ss">硕士</option>
</select>
<!------------------->
<select v-model="grade">
	<option value="">请选择学历</option>
	<option value="zk">专科</option>
	<option value="bk">本科</option>
	<option value="ss">硕士</option>
</select>

// 将选中的value作为 v-model 绑定的属性值
// v-model 作用于 name

radio 中的 v-model：

<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0">女
<!------------------->
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="0">女

// 将选中的value作为 v-model 绑定的属性值
// v-model 作用于 name

指令的修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

修饰符需要配合指令使用，是对指令的进一步描述。

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。