指令(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>