Vue是一個集合了數(shù)據(jù)綁定、虛擬DOM、組件化等特性的現(xiàn)代 JavaScript 框架，它的流行程度一直處于前端框架排行榜的TOP3之中。Vue的標(biāo)記用法是Vue的一個重要特性，它使用特殊的標(biāo)記來達到在HTML模板上插入動態(tài)數(shù)據(jù)的目的，這篇文章主要介紹Vue標(biāo)記用法的細節(jié)。

Vue標(biāo)記用法又叫插值表達式或Mustache語法，用雙大括號括起來代表把變量渲染在頁面中，例如{{msg}}。Vue標(biāo)記可以不僅僅是簡單的變量名，也可以使用JavaScript表達式，例如{{ number + 1 }}或{{ ok ? 'yes' : 'no' }}。在插值表達式中，還可以使用過濾器，這是Vue在Vue 1.x版本中新增的特性，在Vue 2.x中也得到了保留。它們的作用是用于數(shù)據(jù)的格式化，例如{{ msg | capitalize }}會把“hello world”轉(zhuǎn)變?yōu)椤癏ello World”。

new Vue({
el: '#app',
data: {
message: 'hello'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
})

除了插值表達式，Vue也提供了指令，用于在模板中應(yīng)用特殊的行為。表達式的形式是一個指令前綴以v-開頭，例如v-if、v-for和v-bind。在一個Vue實例中，可以很容易地綁定數(shù)據(jù)到DOM元素屬性，也可以控制DOM元素的顯示和隱藏。例如下面的代碼，v-if 指令來控制元素的顯示和隱藏。

Now you see me
var app = new Vue({
el: '#app',
data: {
seen: true
}
})

還有一種指令是v-bind，它可以實現(xiàn)動態(tài)地綁定HTML屬性，例如class和style，格式是v-bind:class="className"。v-bind可以省略，后面的冒號意思是把綁定的屬性名當(dāng)成JavaScript表達式計算，可以綁定多個屬性。

最后，需要注意的是，插值表達式和指令都不支持在模板中編寫任意的JavaScript代碼，它們只支持比較簡單的一些表達式。如果需要更加復(fù)雜的邏輯，需要在Vue實例中定義計算屬性或方法。