6. 指令

指令（Directives）是带有v-前缀的特殊特性。其值的预期值是【单个表达式（v-for例外）】，如

v-if
v-bind

参数

v:bind 用于响应式更新属性

<a v-bind:href="url">click</a>

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

v-on 指令用于监听dom事件

<a v-on:click="functionName"></a>

如名称所示，这里的参数是监听的事件名称。

动态参数

如果你不知道将要赋予值的名称，你也可以用js表达式作为指令的参数。

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

如果上述的值都在后台中赋予了正确的值，name最终可能会解析成这样——

<a v-bind:href="baidu.com"></a>
< a v-on:focus="focusFun"></a>

动态赋值解析结果应该是一个字符串，异常情况下为null，强行设置为null可以被显性的用于移除绑定，而其他非字符串类型的值都会触发警告。
【动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。】

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通方法是不需要引号和空格参数的表达式或者使用计算属性代替。
另外，使用模板的时候，需要注意浏览器特性会将属性全部转变为小写：

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

以“.”指明的特殊后缀，用于支出一个指令应该以特殊方式绑定，如：
.prevent会告诉v-on调用事件的时候触发event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>