iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

30天學會Vue.js系列 第 6

Day 6 Vue模板-2

  • 分享至 

  • xImage
  •  

昨天講到的模板語法都是跟插入內容有關,不管是插入文字內容、插入HTML內容、插入屬性內容

不過稍微修正一下昨天的說法,昨天說模板系統分成插入跟指令,今天仔細讀了一下發現原文"Directive"應該泛指所有v-開頭的特殊DOM屬性,所以這邊應該翻成「指示子」會比較好吧?(以下暫稱指示子,若有更好的翻譯歡迎指教)

今天要介紹的是這些特殊屬性的特性

指示子 v-

如前言所述,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>

這邊hrefv-bind的參數,告訴v-bind要綁定的對象

又如v-on

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

clickv-on的參數,表示v-on的綁定對象

修飾符

有些指示子除了參數外還會有後綴,語法是加上.然後加修飾符,如v-on

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

這可以讓事件被觸發時自動呼叫event.preventDefault()

總結

以上是有關指示子的介紹,要注意的地方是並沒有把所有的例子舉出,如修飾符不只有v-on有而已,其他的等有碰到再介紹囉,明天將介紹模板中的filter


上一篇
Day 5 Vue模板
下一篇
Day 7 Vue模板-3
系列文
30天學會Vue.js8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言