Vue.js 使用了基於 HTML 的模板語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上,Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統,Vue 能夠智能地計算出最少需要重新渲染多少組件,並把 DOM 操作次數減到最少。
文字
資料綁定最常見的方式就是使用雙大括號 {{message}}
的文字插值:
<span>{{message}}</span>
當綁定的物件message改變時,插值處的內容都會更新。
而使用 v-once
可以僅插值一次,後續 message 改變時插值處也不會更新。
<span v-once>使用v-once當數據改變時,內容不會更新:{{message}}</span>
舉個例子,今天我新增一個按鈕,點擊按鈕後會在 message這個array中push 99,在一般插值處會動態更新,而使用 v-once
的插值處不做任何改變。
<div id="app">
<p><span>{{message}}</span></p>
<p><span v-for="msg in message">{{msg}},</span></p>
<p><span v-once>使用v-once當數據改變時,內容不會更新:{{message}}</span></p>
<button v-on:click="addMessage">添加元素</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: [30, 20, 10]
},
methods: {
addMessage: function() {
this.message.push(99)
}
}
})
效果
HTML
使用雙大括號的內容會以純文字的形式插入,若想插入html的話可以使用v-html
屬性:
<div id="app2">
<p>{{rawHtml}}</p>
<p><span v-html="rawHtml"></span></p>
</div>
var app2 = new Vue({
el: '#app2',
data: {
rawHtml: '<table border="1"><tr><td>table</td></tr></table>'
}
})
效果
但注意動態插入HTML會有XSS攻擊的風險,所以記住插入的HTML一定要是被信任的,且盡量避免讓使用者插入HTML。
屬性
使用 v-bind:attr
的方式插入屬性
<div v-bind:id="dynamicId"></div>
對於綁定資料型態為boolean,可做屬性的切換
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false,則 disabled attribute 甚至不會被包含在渲染出來的 元素中。
JavaScript表達式
Vue.js支持JavaScript表達式
<div id="app3">
<p><span>number + 1 = {{number + 1}}</span></p>
<p><span>{{ok ? 'Yes':'No'}}</span></p>
<p><span>{{message.split('').reverse().join('')}}</span></p>
</div>
var app3 = new Vue({
el: '#app3',
data: {
number: 1,
ok: true,
message: 'Hello,World!'
}
})
效果
number + 1 = 2
Yes
!dlroW,olleH
註:join()
方法會將陣列中所有的元素連接、合併成一個字串,並回傳此字串。
這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。
有個限制就是,每個綁定都只能包含單個表達式,所以下面的例子都不會生效。
<!-- 這是語句,不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效,請使用三元表達式 -->
{{ if (ok) { return message } }}
而且只能執行在白名單內的全域函式像是Math跟Date,無法使用自定義函式。
動態參數(2.6.0新增)
從 2.6.0 開始,可以用方括號括起來的 JavaScript 表達式作為一個指令的參數:
<a v-bind:[attributeName]="url"> ... </a>
這裡的 attributeName 會被作為一個 JavaScript 表達式進行動態求值,求得的值將會作為最終的參數來使用。
同樣地,你可以使用動態參數為一個動態的事件名綁定處理函數:
<a v-on:[eventName]="doSomething"> ... </a>
對動態參數的值的約束
動態參數預期會求出一個字符串,異常情況下值為 null。
這個特殊的 null 值可以被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。
對動態參數表達式的約束
動態參數表達式有一些語法約束,因為某些字符,如空格和引號,放在 HTML attribute 名里是無效的。例如:
<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
變通的辦法是使用沒有空格或引號的表達式,或用計算屬性替代這種複雜表達式。
在 DOM 中使用模板時 (直接在一個 HTML 文件裡撰寫模板),還需要避免使用大寫字符來命名鍵名,因為瀏覽器會把 attribute 名全部強制轉為小寫:
<!--
在 DOM 中使用模板時這段代碼會被轉換為v-bind:[someattr]。
除非在實例中有一個名為“someattr”的 property,否則代碼不會工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
修飾符
有些指示子除了參數外還會有後綴,語法是加上.然後加修飾符,如v-on
:
<form v-on:submit.prevent="onSubmit">...</form>
這可以讓事件被觸發時自動呼叫 event.preventDefault()
縮寫
Vue 為 v-bind
和 v-on
這兩個最常用的指令,提供了特定簡寫:
v-bind縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
它們看起來可能與普通的 HTML 略有不同,但 :
與 @
對於 attribute 名來說都是合法字符,在所有支持 Vue 的瀏覽器都能被正確地解析。而且,它們不會出現在最終渲染的標記中。
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
- [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日