vuejs指令

vue指令是指带有特殊 v- 特殊前缀的属性. 指令属性的指预期是单个 JavaScript 的值, ( v-for 是例外, 这里暂不做讨论). 指定的职责是绑定 JavaScript 的属性到 dom 上.

一个绑定了 vue 指令的dom元素, 当表达式的值发生改变时, 会重新加载dom, 例如

<p v-if="seen">这是v-if指令, 当你看到我表示seen表达式为真, 否则为假</p>

这里需要说明一下, 双大括号仅仅是将 vue 元素的值显示出来, 而指令能让它嵌入到 html 中, 或者绑定 html 属性, 或者 js 方法, 比如

①假设 html 中是下面这个内容

<span v-html="link"></span>

②假设 vue 元素中有这样一个 data

link:'<a href="https://www.baidu.com">我是一个链接</a>'

那么最终的结果是, span 中嵌套了 a 链接, 也就是把 a 链接作为 html 嵌入到 span 中, 而如果你是<span>{{link}}</span>, 那么 a 链接不会被解析

参数

上面的 v-html 是一个表达式, 但并没有参数, 有的vue指令能携带一个参数

比如, v-bind 指令能携带一个属性 href, 可以响应式的更新 html 属性

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

这里的 href 是一个参数, 告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定.

除了html属性, 还可以绑定js的方法. 比如 v-on 例子

<a v-on:click="doSomething">...</a>

这里的 doSomething 是一个方法名

动态参数

从 2.6.0 版本开始, 可以使用 [JavaScript表达式] 的形式作为指令的参数 ( 动态参数存在写法约束, 会在后面的章节讲到 )

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

这里的 attributeName 会作为一个 JavaScript 表达式解析, 并最终作为vue参数使用, 具体是指, 若你有一个 data 的属性名为 attributeName, 属性值为 href , 最终的效果等价于 v-bing:href.

此外, 绑定 Js 方法依然适用, 例如

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

当 eventName 的值最终为 focus 时, 将等价于 v-on:focus.

对动态参数的值的约束

动态参数最终会得到一个字符串值, 异常情况下值为 null. 当它不为 null, 均会发出一个警告, 而对于 null, 它可以被显性的用于移除绑定, 也就是不显示.

对动态参数表达式的约束

表达式中存在某些字符, 如空格和引号, 放在 html 属性中是无效的, 并将发出一个警告, 例如

<a v-bind:['foo' + bar]="value"> ... </a>

你可以使用没有空格和引号的表达式, 替代上面这个错误的例子

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

<!-- 当且仅当存在一个data属性为 someattr 下面这个语句才会工作 -->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

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

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

在后续章节中, 你会看到修饰符的其它例子。