Vue：指令概述

一，指令

1，指令

在之前的Vue文章中我们已经使用过指令了，比如v-bind、v-pre等。

其实指令Directives就是带有 v- 前缀的特殊attribute。

指令attribute的值预期是单个JavaScript表达式 (v-for 是例外情况)。

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

<div id="app">
    <p v-if="show">现在你看到我了</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>

• v-if 指令将根据表达式 seen 的值的真假来插入/移除

  元素。

数据驱动DOM是Vue.js的核心理念，所以不到万不得已时不要主动操作DOM，你只需要维护好数据，DOM的事可由Vue帮你优雅的处理。Vue.js内置了很多指令，能帮快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。

2，参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。举个例子：

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

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

这里介绍一下常用的v-bind指令：
v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id、class 等，举个例子：

这里再介绍另一个常用的v-on指令：
v-on指令的作用绑定事件监听器，这样我们就可以做些简单的交互了。举个例子：

3，动态参数

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

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

• 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。
• 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。
• 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的，变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
• 还需要避免使用大写字符来命名动态参数，因为浏览器会把 attribute 名全部强制转为小写，除非在实例中确实有一个同名的 property，否则代码不会工作。

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

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

• 当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。

4，修饰符

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

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

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

二，指令语法糖——缩写

语法糖是指在不影响功能的情况下 添加某种方法实现同样的效果 从而方便程序开发。

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

v-bind和v-on指令都提供了语法糖——缩写。

1，v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

2，v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>