4.5　指令

指令（Directives）是带有“v-”前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

例如下面代码中，v-if指令将根据表达式布尔值（boole）的真假来插入或移除<p>元素。

1．参数

一些指令能够接收一个“参数”，在指令名称之后以英文冒号表示。例如，v-bind指令可以用于响应式地更新HTML特性：

在这里href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。

v-on指令用于监听DOM事件，例如下面代码：

其中参数click是监听的事件名，在后面章节中将会详细介绍v-on指令的具体用法。

2．动态参数

从Vue 2.6.0版本开始，可以把方括号括起来的JavaScript表达式作为一个指令的参数：

这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，在Vue实例的data选项有一个attributeName属性，其值为"href"，那么这个绑定等价于v-bind:href。

同样地，可以使用动态参数为一个动态的事件名绑定处理函数：

在这段代码中，当eventName的值为"click"时，v-on:[eventName]将等价于v-on:click。

下面看一个示例，其中用v-bind绑定动态参数attr，v-on绑定事件的动态参数things。

【例4.10】动态参数（源代码\ch04\4.10.html）。

在浏览器中运行程序，在页面中单击“单击事件”按钮，弹出“触发了单击事件”，结果如图4-13所示。

对动态参数的值的约束：动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其他非字符串类型的值都将会触发一个警告。

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTML属性名里是无效的。例如：

所以不要使用带空格或引号的表达式，或用计算属性替代这种复杂表达式。

在DOM中使用模板时，还需要避免使用大写字符来命名键名，因为浏览器会把属性名全部强制转为小写：

3．事件修饰符

修饰符（modifier）是以半角句号“.”指明的特殊后缀，用于指出v-on应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：