Vue.js使用的是一種HTML的超集的模板語言。任何HTML都是有效的Vue.js模板,除此之外,Vue.js還提供了兩個強大的功能:內插和指令。
Vue.js使用的是一種HTML的超集的模板語言。
任何HTML都是有效的Vue.js模板,除此之外,Vue.js還提供了兩個強大的功能:內插和指令。
以下是一個有效的Vue.js模板:
<span>Hello!</span>
這個模板可以放在明確聲明的Vue組件內:
new Vue({
template: '<span>Hello!</span>'
})
也可以放在單文件組件內:
<template>
<span>Hello!</span>
</template>
第一個例子非常基礎。下一步是使其輸出組件狀態的一部分,例如名字。
使用內插就可以實現這一點。首先,我們在組件中添加一些數據:
new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello!</span>'
})
然後,我們可以使用雙大括號語法將其添加到模板中:
new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello {{name}}!</span>'
})
這裡有一個有趣的事情。看到了嗎?我們只使用了name
而不是this.data.name
?
這是因為Vue.js執行了一些內部綁定,使得模板可以像使用本地屬性一樣使用該屬性。非常方便。
在單文件組件中,可以這樣寫:
<template>
<span>Hello {{name}}!</span>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
}
}
</script>
在導出時,我使用了一個普通函數。為什麼不使用箭頭函數?
這是因為在data
中,我們可能需要訪問組件實例的一個方法,如果this
未綁定到組件,則無法實現,所以無法使用箭頭函數。
我們可以使用箭頭函數,但是在使用this
時,我需要記住切換到普通函數。更保險,我認為這樣更好。
現在,回到內插。
{{ name }}
使人想起Mustache/Handlebars模板內插,但這只是一個視覺提醒。
在這些模板引擎中,它們是“愚蠢”的,而在Vue中,你可以做很多事情,它更靈活。
你可以在插值中使用任何JavaScript表達式,但只能使用一個表達式:
{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}
Vue提供了對一些全局對象的訪問,包括Math和Date,所以你可以使用它們:
{{ Math.sqrt(16) * Math.random() }}
最好避免在模板中添加復雜的邏輯,但是Vue允許這樣做,這給予我們更多的靈活性,尤其是在嘗試事物的時候。
我們可以首先嘗試在模板中放置一個表達式,然後稍後將其移到一個計算屬性或方法中。
任何內插中包含的值都會在其依賴的任何數據屬性更改時更新。
您可以使用v-once
指令避免此響應式更新。
結果總是被轉義,因此無法在輸出中包含HTML。
如果需要有HTML片段,則需要使用v-html
指令。