Vue.js 模板語法
Vue.js 使用了基於 HTML 的模版語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。
Vue.js 的核心是一個允許你採用簡潔的模板語法來宣告式的將資料渲染進 DOM 的系統。
結合響應系統，在應用狀態改變時， Vue 能夠智慧地計算出重新渲染元件的最小代價並應用到 DOM 操作上。
插值
文字
資料繫結最常見的形式就是使用 {{…}}（雙大括號）的文字插值：
文字插值
<div id=”app”>
<p>{{ message }}</p>
</div>
使用 v-html 指令用於輸出 html 程式碼：
v-html 指令
<div id=”app”>
<div v-html="message"></div></div>
<script>
new Vue({
el: `#app`,
data: {
message: `<h1>菜鳥教程</h1>`}
})
</script>
屬性
HTML 屬性中的值應使用 v-bind 指令。
以下例項判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
v-bind 指令
<div id=”app”>
<label for=”r1″>修改顏色</label><input type=”checkbox” v-model=”class1″ id=”r1″>
<div v-bind:class=”{`class1`: class1}”>
directiva v-bind:class</div>
</div>
<script>
new Vue({
el: `#app`,data:{
class1: false}
});
</script>
表示式
Vue.js 都提供了完全的 JavaScript 表示式支援。
JavaScript 表示式
<div id=”app”>
{{5+5}}<br>
{{ ok ? `YES` : `NO` }}<br>
{{ message.split(``).reverse().join(``) }}
<div v-bind:id="`list-` + id">菜鳥教程</div></div>
<script>
new Vue({
el: `#app`,
data: {
ok: true,
message: `RUNOOB`,
id : 1}
})
</script>
指令
指令是帶有 v- 字首的特殊屬性。
指令用於在表示式的值改變時，將某些行為應用到 DOM 上。如下例子：
例項
<div id=”app”>
<p v-if="seen">現在你看到我了</p></div>
<script>
new Vue({
el: `#app`,
data: {
seen: true}
})
</script>
引數
引數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
例項
<div id=”app”>
<pre><a v-bind:href="url">菜鳥教程</a></pre></div>
<script>
new Vue({
el: `#app`,
data: {
url: `http://www.runoob.com`}
})
</script>
在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
在這裡引數是監聽的事件名。
使用者輸入
在 input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結：
字串反轉
<div id=”app”>
<p>{{ message }}</p>
<input v-model="message"></div>
<script>
new Vue({
el: `#app`,
data: {
message: `Runoob!`}
})
</script>
按鈕的事件我們可以使用 v-on 監聽事件，並對使用者的輸入進行響應。
以下例項在使用者點選按鈕後對字串進行反轉操作：
字串反轉
<div id=”app”>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉字串</button></div>
<script>
new Vue({
el: `#app`,
data: {
message: `Runoob!`},
methods: {
reverseMessage: function () {
this.message = this.message.split(``).reverse().join(``)
}}
})
</script>
過濾器
Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。由”管道符”指示, 格式如下：
<!– 在兩個大括號中 –>
{{ message | capitalize }}
<!– 在 v-bind 指令中 –>
<div v-bind:id=”rawId | formatId”></div>
過濾器函式接受表示式的值作為第一個引數。
以下例項對輸入的字串第一個字母轉為大寫：
例項
<div id=”app”>
{{ message | capitalize }}
</div>
<script>
new Vue({
el: `#app`,
data: {
message: `runoob`},
filters: {
capitalize: function (value) {
if (!value) return ``
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}}
})
</script>
過濾器可以串聯：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函式，因此可以接受引數：
{{ message | filterA(`arg1`, arg2) }}
這裡，message 是第一個引數，字串 `arg1` 將傳給過濾器作為第二個引數， arg2 表示式的值將被求值然後傳給過濾器作為第三個引數。
縮寫
v-bind 縮寫
Vue.js 為兩個最為常用的指令提供了特別的縮寫：
v-on 縮寫