Mustache 語(yǔ)法不能作用在 HTML 特性上红柱,遇到這種情況應(yīng)該使用
<div v-bind:id="dynamicId"></div>
指令
指令(directives)是帶有v- 前綴的特殊屬性岩榆,指令屬性的值預(yù)期是單個(gè) JavaScript 表達(dá)式
<p v-if="seen">現(xiàn)在你看到我了</p>
這里 v-if 指令 會(huì)根據(jù)表達(dá)式 seen 的值的真假來(lái)插入/移除 p元素
參數(shù)
一些指令能夠接收一個(gè)“參數(shù)”只泼,在指令名稱之后以冒號(hào)表示沫换。例如撒遣,v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性:
<a v-bind:href="url">...</a>
在這里href 是參數(shù) 告訴v-bind 指令將該元素的herf屬性和表達(dá)式url 的值綁定
另一個(gè)例子是 v-on 指令喳逛,它用于監(jiān)聽(tīng) DOM 事件:
<a v-on:click="doSomething">...</a>
在這里參數(shù)是監(jiān)聽(tīng)的事件名
修飾符
修飾符 (Modifiers) 是以半角句號(hào) . 指明的特殊后綴瞧捌,用于指出一個(gè)指令應(yīng)該以特殊方式綁定。例如润文,.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
縮寫(xiě)
v-bind
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫(xiě) -->
<a :href="url">...</a>
v-on
<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫(xiě) -->
<a @click="doSomething">...</a>