【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)
                }
            }
        })

效果

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

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>'
    }
})

效果

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

但注意動態插入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-bindv-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 的瀏覽器都能被正確地解析。而且,它們不會出現在最終渲染的標記中。

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 【Vue.js學習筆記】Vue模板語法
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論