Vue.js 學習旅程Mile 5 – 模板語法之二:Directives 指令


Posted by yuhantaiwan on 2020-03-22


指令 Directives

指令 (Directives) 是帶有 v- 前綴的特殊屬性 attribute。指令的值預期是單個 Javascript 表達式(Expression)。當表達式的值改變時,指令會響應式地將其產生的影響作用於 DOM 上。

常見的例如:v-text, v-if, v-on 等,後面會有篇章詳細的介紹這些常見的模板指令的用法。此篇文章主要在了解指令的配置方式。

另外,除了使用這些固定的模板語法外,我們也可以自定義指令。這個部分之後會有文章做專門的介紹。

比較

Mustache 語法:取代頁面上的某個區塊 <div></div>
Directives 指令:放在 HTML 標籤內,影響該 DOM 元素

配置方式

指令:[參數].修飾符="值"
Directive:[Argument].Modifier="Value"

Directive

不需要表達式。Directive 直接作用在元素上。
例如:v-once。只渲染元素和元件一次。隨後的重新渲染,元素/元件及其所有的子節點將被視為靜態內容並跳過。可以用於優化更新性能。

<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>

Directive = "Value"

Directive 依照 Value 作用在元素上。
例如:v-text="msg"。更新元素的 textContent。

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

Directive:Argument = "Value"

Directive 依照 Value 作用在 Argument 上。
例如:v-bind:src,動態地綁定一個或多個特性,或是 v-on:click,監聽 DOM 事件。

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 監聽 click 事件 -->
<a v-on:click="doSomething">...</a>

Directive:[Argument] = "Value"

動態參數。
從 2.6.0 開始,可以用方括號括起來的 JavaScript 表達式作為一個指令的參數。

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

這裡的 attributeName 會被作為一個 JavaScript 表達式進行動態求值,求得的值將會作為最終的參數來使用。例如,如果你的 Vue 實例有一個 data 屬性 attributeName,其值為 "href",那麼這個綁定將等同於 v-bind:href

<a v-on:[eventName]="doSomething"> ... </a>

在這個範例中,當 eventName 的值為 "focus" 時,v-on:[eventName] 等同於 v-on:focus

動態參數限制

動態參數的值預設為字串。若為 null 的話,則可以用來解除其綁定。其他非字串 或 null 型別的值就會出現錯誤警告。

Directive:Argument.Modifier="Value"

Directive 依照 Modifier 設定的特殊方式將 Value 作用在 Argument 上。
例如:v-on:click.oncev-on:submit.prevent

<!-- 點擊事件只會觸發一次 -->
<button v-on:click.once="doThis"></button>
<!-- 調用 event.preventDefault()-->
<form v-on:submit.prevent="onSubmit">...</form>

縮寫 Shorthands

對於一些頻繁用到的指令來說,使用 v- 前綴會感到繁瑣。因此,
Vue 為 v-bindv-on 這兩個最常用的指令,提供了特定縮寫:

v-bind 縮寫

省略 v-bind,剩下

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 縮寫

v-on 縮寫為 @

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

結語

藉由這篇文章的整理,才對 Vue 的這些指令有了全面的了解,清楚他是如何配置的。不然之前都是看到一個記一個,沒有特別清楚他的規則,常常到後來就會被搞混。現在經過整理,希望對於之後在使用這些指令時能更駕輕就熟。

參考資料


#w3HexSchool #Vue #javascript