Vue语法学习第二课——指令

指令，是指在Vue中，带有-v前缀的特殊特性

指令特性的值预期是单个JavaScript表达式（v-for例外）

<p v-if="seen">看得到</p>

 

① 参数

　　一个指令接受一个参数

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

　　　　其中 v-bind 指定的参数为 href。告知 v-bind 将该元素的href特性与表达式 url 的值绑定

　　再者，这里的参数为监听的事件名

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

 

② 动态参数 （2.6.0新增）

　　方括号括起来的JavaScript表达式可作为参数

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

 

　　　　若vue实例中有一个data属性attributeName，其值为"herf"，等价于 v-bind : herf。

　　约束：动态参数预期求出一个字符串，异常时为Null，Null值可以被显性地用于移除绑定。其他非string类型会触发警告。

　　注：某些字符无效，比如空格和引号

    <a v-bind : ['foo'+bar] : "value">...</a>    <!-- 该代码无效，编译警告 -->

 

 

③ 修饰符

　　以 点（.） 指明的特殊后缀

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

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

 

④ 缩写

v-bind 完整:   <a v-bind:href="url">...</a>
       缩写:   <a :href="url">...</a>

v-on   完整:   <a v-on:click="doSomething">...</a>
       缩写:   <a @click="doSomething">...</a>