昨天講到的模板語法都是跟插入內容有關,不管是插入文字內容、插入HTML內容、插入屬性內容
不過稍微修正一下昨天的說法,昨天說模板系統分成插入跟指令,今天仔細讀了一下發現原文"Directive"應該泛指所有v-
開頭的特殊DOM屬性,所以這邊應該翻成「指示子」會比較好吧?(以下暫稱指示子,若有更好的翻譯歡迎指教)
今天要介紹的是這些特殊屬性的特性
如前言所述,Vue的特殊DOM屬性都會以v-
開頭,如v-if
,這些特殊屬性的內容必須是單行的Javascript敘述(除了v-for
之外),可以回憶一下之前的範例
<p v-if="seen">Now you see me</p>
有些指示子會有參數,語法是在指示子後面加上:
,然後接著參數,如v-bind
<a v-bind:href="url"></a>
這邊href
是v-bind
的參數,告訴v-bind
要綁定的對象
又如v-on
<a v-on:click="doSomething">
click
是v-on
的參數,表示v-on
的綁定對象
有些指示子除了參數外還會有後綴,語法是加上.
然後加修飾符,如v-on
<form v-on:submit.prevent="onSubmit"></form>
這可以讓事件被觸發時自動呼叫event.preventDefault()
以上是有關指示子的介紹,要注意的地方是並沒有把所有的例子舉出,如修飾符不只有v-on
有而已,其他的等有碰到再介紹囉,明天將介紹模板中的filter