【Vue.js學習筆記】Vue模板語法

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 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。