Vue.js 使用了基于 HTML 的模版語(yǔ)法盗忱，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML 羊赵，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析趟佃。
在底層的實(shí)現(xiàn)上， Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)闲昭，在應(yīng)用狀態(tài)改變時(shí)罐寨， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
如果你熟悉虛擬 DOM 并且偏愛(ài) JavaScript 的原始力量汤纸，你也可以不用模板衩茸，直接寫渲染（render）函數(shù)，使用可選的 JSX 語(yǔ)法贮泞。

插值

文本

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 “Mustache” 語(yǔ)法（雙大括號(hào)）的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 msg
屬性的值楞慈。無(wú)論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg
屬性發(fā)生了改變啃擦，插值處的內(nèi)容都會(huì)更新囊蓝。
通過(guò)使用 v-once 指令，你也能執(zhí)行一次性地插值令蛉，當(dāng)數(shù)據(jù)改變時(shí)聚霜，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：

<span v-once>This will never change: {{ msg }}</span>

純-HTML

雙大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本珠叔，而非 HTML 蝎宇。為了輸出真正的 HTML ，你需要使用 v-html 指令：

<div v-html="rawHtml"></div>

被插入的內(nèi)容都會(huì)被當(dāng)做 HTML —— 數(shù)據(jù)綁定會(huì)被忽略祷安。注意姥芥，你不能使用 v-html 來(lái)復(fù)合局部模板，因?yàn)?Vue 不是基于字符串的模板引擎汇鞭。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元凉唐。

你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊霍骄。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值台囱，絕不要對(duì)用戶提供的內(nèi)容插值。

屬性

Mustache 不能在 HTML 屬性中使用读整，應(yīng)使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

這對(duì)布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會(huì)被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

使用-JavaScript-表達(dá)式

迄今為止簿训，在我們的模板中，我們一直都只綁定簡(jiǎn)單的屬性鍵值米间。但實(shí)際上车伞，對(duì)于所有的數(shù)據(jù)綁定另玖， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持谦去。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析鳄哭。有個(gè)限制就是妆丘，每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面的例子都不會(huì)生效奶赠。

<!-- 這是語(yǔ)句毅戈，不是表達(dá)式 -->
{{ var a = 1 }}
<!-- 流控制也不會(huì)生效苇经，請(qǐng)使用三元表達(dá)式 -->
{{ if (ok) { return message } }}

模板表達(dá)式都被放在沙盒中扇单，只能訪問(wèn)全局變量的一個(gè)白名單令花，如 Math 和 Date 兼都。你不應(yīng)該在模板表達(dá)式中試圖訪問(wèn)用戶定義的全局變量扮碧。

過(guò)濾器

Vue.js 允許你自定義過(guò)濾器慎王，被用作一些常見(jiàn)的文本格式化宏侍。過(guò)濾器應(yīng)該被添加在 mustache 插值的尾部谅河，由“管道符”指示：

{{ message | capitalize }}

Vue 2.x 中，過(guò)濾器只能在 mustache 綁定中使用鲜侥。為了在指令綁定中實(shí)現(xiàn)同樣的行為描函，你應(yīng)該使用計(jì)算屬性狐粱。

過(guò)濾器函數(shù)總接受表達(dá)式的值作為第一個(gè)參數(shù)脑奠。也可以自定義自己的過(guò)濾器

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

過(guò)濾器可以串聯(lián)：

{{ message | filterA | filterB }}

過(guò)濾器是 JavaScript 函數(shù)宋欺，因此可以接受參數(shù)：

{{ message | filterA('arg1', arg2) }}

這里齿诞，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)祷杈， arg2 表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)但汞。

指令

指令（Directives）是帶有 v- 前綴的特殊屬性私蕾。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了 v-for，之后再討論）磕潮。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上自脯。讓我們回顧一下在介紹里的例子：

<p v-if="seen">Now you see me</p>
這里斤富， v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來(lái)移除/插入 <p> 元素满力。

參數(shù)

一些指令能接受一個(gè)“參數(shù)”屋谭，在指令后以冒號(hào)指明。例如悔耘， v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性：

<a v-bind:href="url"></a>

在這里 href 是參數(shù)缓艳，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定阶淘。

另一個(gè)例子是 v-on 指令，它用于監(jiān)聽(tīng) DOM 事件：

<a v-on:click="doSomething">

在這里參數(shù)是監(jiān)聽(tīng)的事件名溪窒。我們也會(huì)更詳細(xì)地討論事件處理澈蚌。

修飾符

修飾符（Modifiers）是以半角句號(hào) . 指明的特殊后綴宛瞄，用于指出一個(gè)指定應(yīng)該以特殊方式綁定份汗。例如杯活，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

之后當(dāng)我們更深入地了解 v-on 與 v-model時(shí)轩猩，會(huì)看到更多修飾符的使用荡澎。

縮寫

v- 前綴在模板中是作為一個(gè)標(biāo)示 Vue 特殊屬性的明顯標(biāo)識(shí)摩幔。當(dāng)你使用 Vue.js 為現(xiàn)有的標(biāo)記添加動(dòng)態(tài)行為時(shí)或衡，它會(huì)很有用车遂，但對(duì)于一些經(jīng)常使用的指令來(lái)說(shuō)有點(diǎn)繁瑣舶担。同時(shí)衣陶，當(dāng)搭建 Vue.js 管理所有模板的 SPA 時(shí)剪况，v- 前綴也變得沒(méi)那么重要了译断。因此孙咪，Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫：

v-bind 縮寫

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

它們看起來(lái)可能與普通的 HTML 略有不同隆箩，但 : 與 @ 對(duì)于屬性名來(lái)說(shuō)都是合法字符捌臊，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且逞力，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記寇荧≈此恚縮寫語(yǔ)法是完全可選的镀琉，但隨著你更深入地了解它們的作用屋摔，你會(huì)慶幸擁有它們。

結(jié)合上述的內(nèi)容装黑，具體代碼如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>level01</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
</head>
<body>
<div id="app">
    <!--text 綁定糠睡，可以使用v-text指令箕别，也可以使用{{}} -->
    <span v-text="msg"></span>
    {{text1}}
    <!--v-once綁定的值串稀，不會(huì)通過(guò)響應(yīng)式而改變-->
    <span v-once>{{text2}} 我不會(huì)再被改變</span>
    <!--html 綁定，可以使用v-html指令-->
    <div v-html="html"></div>
    <!--屬性的綁定橄教，需要通過(guò)v-bind:(屬性) 并且在所有的數(shù)據(jù)綁定中都可以使用javascript表達(dá)式-->
    <div v-bind:title='flag?title:"333"' :abs="title">{{flag?title:"333"}}</div>

    {{title|filterA}}
    <!--事件的綁定-->
    <div @click="clickEvent()">我是按鈕</div>
</div>
<script type="text/javascript">


var app = new Vue({
    el:'#app'
    ,data:{
        msg:'信息1'
        ,text1:'信息2'
        ,text2:'信息3'
        ,html:'<a href="###">鏈接</a>'
        ,title:'我是title'
        ,flag:false
    }
    ,methods:{
        clickEvent:function(){
            //事件中的this指向的都是組件或者vue實(shí)例本身
            console.log(this)
        }
    }
    ,filters:{
        //自定義的過(guò)濾器华烟，過(guò)濾器的第一個(gè)參數(shù)都是值
        filterA:function(value){
            if (!value) return ''
            value = value.toString()
            return value.toUpperCase()
        }
    }
});
setTimeout(function(){
    app.msg = "信息1改變";
    app.text3 = "信息3改變";
    app.flag = true;
},5000);

</script>
</body>
</html>