vue.js 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。

常用内置指令

v-bind  动态的绑定数据，简写为:

v-on  绑定事件监听器，简写为@

v-model  在表单控件元素上创建双向数据绑定

v-if  根据值的真假，切换元素会被销毁、重建

v-else  条件都不符合时渲染

v-else-if  多条件判断，为真渲染

v-for  基于源数据多次渲染元素或模板块

v-html  可以解析数据中的html结构

v-text  更新数据，会覆盖已有结构

v-show  根据值的真假，切换元素display属性

v-once  只渲染一次，随后数据更新不重新渲染

v-pre   跳过元素和子元素的编译过程

v-cloak  隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none}

参数

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

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

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

动态参数

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

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

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

对动态参数的值的约束

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

对动态参数表达式的约束

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

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写.