指令是带有v-前缀的特殊attribute。指令attribute值应该是单个JavaScript表达式（v-for和v-on除外，稍后将讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。比如，在前面教程中所提供的v-once、v-html就是指令。
本节示例源码可以在“template-syntax-directive”应用中找到。
1. 参数
一些指令能够接收一个参数，这个参数在指令名称之后以冒号表示。例如，下面示例中v-bind指令可以用于响应式地更新 HTML attribute：
<template>
<div>
<!-- v-bind指令 -->
<p>
<a v-bind:href="url">Welcome to waylau.com</a>
</p>
</div>
</template>
<script lang="ts">
import { Vue } from "vue-class-component";
export default class App extends Vue {
private url: string = "https://waylau.com/";
}
</script>
在这里href是参数，告知v-bind指令将该元素的href attribute与表达式url的值绑定。
另一个例子是v-on指令，它用于监听DOM事件：
<template>
<div>
<!-- v-on指令 -->
<p>
<a v-on:click="doLog">doLog</a>
</p>
</div>
</template>
<script lang="ts">
import { Vue } from "vue-class-component";
export default class App extends Vue {
doLog() {
console.log("do logging...");
}
}
</script>
在这里参数是监听的事件名。后续课程还会更详细地讨论事件处理。
2. 动态参数
也可以在指令参数中使用JavaScript表达式，方法是用方括号括起来，这样就相当于实现了动态参数。观察下面的例子：
<template>
<div>
<!-- v-on指令，动态参数 -->
<p>
<a v-on:[eventName]="doLog">doLog</a>
</p>
</div>
</template>
<script lang="ts">
import { Vue } from "vue-class-component";
export default class App extends Vue {
private eventName: string = " click ";
doLog() {
console.log("do logging...");
}
}
</script>
在上述例子中，这里的eventName的值为“click”时，` v-on:[eventName]` 等价于 `v-on:click`，也就是绑定了点击事件。
3. 修饰符
修饰符（modifier）是以英文句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，“.prevent”修饰符告诉 v-on指令对于触发的事件需要调用event.preventDefault()，示例如下：
<!-- v-on指令，修饰符 -->
<form v-on:submit.prevent="onSubmit">Submit</form>
4. 缩写
“v-”前缀作为一种视觉提示，用来识别模板中Vue特定的attribute。当使用Vue.js为现有标签添加动态行为时，“v-”前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序（single page application，简称SPA）时，“v-”前缀也变得没那么重要了。因此，Vue 为 v-bind和v-on这两个最常用的指令，提供了特定简写。
5. v-bind缩写
以下是完整的v-bind指令用法：
<!-- v-bind指令 -->
<p>
<a v-bind:href="url">Welcome to waylau.com</a>
</p>
采用缩写的v-bind指令用法如下：
<!-- v-bind指令缩写 -->
<p>
<a :href="url">Welcome to waylau.com</a>
</p>
以下是采用了动态参数的缩写的v-bind指令用法：
<!-- v-bind指令缩写，动态参数 -->
<p>
<a :[key]="url">Welcome to waylau.com</a>
</p>
6. v-on缩写
以下是完整的v-on指令用法：
<!-- v-on指令 -->
<p>
<a v-on:click="doLog">doLog</a>
</p>
采用缩写的v-on指令用法如下：
<!-- v-on指令缩写 -->
<p>
<a @click="doLog">doLog</a>
</p>
以下是采用了动态参数的缩写的v-on指令用法：
<!-- v-on指令缩写，动态参数 -->
<p>
<a @[eventName]="doLog">doLog</a>
</p>
它们看起来可能与普通的 HTML 略有不同，但 “:”与“@”对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。
7. 一些约定
7.1. 对动态参数值约定
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
7.2. 对动态参数表达式约定
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式，或用[计算属性](computed.html)替代这种复杂表达式。
在 DOM 中使用模板时，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
7.3. 对访问全局变量的约定
Vue模板表达式都被放在沙盒中，只能访问全局变量的白名单，如Math和Date。你不应该在模板表达式中试图访问用户定义的全局变量。
苏公安网备 32011402010933号