上兩節我們學習了vue的例項知識：第4節:vue例項的4個常用選項第5節:vue 例項的生命週期
提醒一下，這兩節的內容在後面實戰的時候很重要，如果落下的同學可以回去翻看學習，不必害怕難學，這裡沒有難學的教程。這一節，我們學習如何在html上繫結我們例項中的資料。Mustache 語法什麼叫Mustache語法，別被這高大上的叫法嚇到了，其實就是雙大括號{{ }}的寫法，在之前的章節我們就演示過在檢視中顯示我們的資料，這是最常見的繫結方式。有了它，我們可以輕鬆地在檢視顯示我們的資料並及時自動更新，無需手動控制。

1. <div id="app">{{ name }}</div>
   
2. <script>
   
3.     let app = new Vue({
   
4.     el:"#app",
   
5.     data:{
   
6.       name:"前端君"
   
7.     }
   
8.   });
   
9. </script>

複製程式碼十分簡單，頁面檢視上也成功顯示我們的data中的name的值：“前端君”。繫結純html有時候有一種這樣的需求，我們的資料包含了一些html的標籤程式碼，比如： 

1. name:"<strong>前端君</strong>"

複製程式碼
文字“前端君”被一個<strong>標籤包住，而我們在展示的是，需要合理地渲染strong標籤，再顯示我們想要展示文字內容。這種情況，用原來的雙大括號{{  }}方式，就不能滿足了，它會渲染成這樣：

<strong>被當作是普通的文字資料被展示了，這並不是我們想要的結果。這個是時候，你需要用vue提供的v-html指令，用法如下：

1. <div id="app" v-html="name"></div>
   
2. <script>
   
3.   let app = new Vue({
   
4.    el:"#app",
   
5.    data:{
   
6.     name:"<strong>前端君</strong>"
   
7.    }
   
8.   });
   
9. </script>

複製程式碼v-html以屬性的形式新增到了div中，值為“name”，也就是我們資料data中的name：

1. "<strong>前端君</strong>"

複製程式碼我們來看看檢視展示的結果：

檢視上的“前端君”有了明顯的加粗效果，說明<strong>標籤發揮了作用，我們通過chrome的開發者工具檢視解析生成後的html文件，name的值，被解析成html標籤，並作為位元組點，插入在<div id=”app”></div>中去。這，就是v-html的作用啦。繫結屬性前面兩個都是控制檢視展示文字內容，有時候，html標籤的屬性也很重要，比如：<a>標籤的href屬性，<img/>標籤的src屬性等。Vue中如何將data中的資料繫結為這些屬性的值呢？還是用雙大括號{{  }}的寫法嗎？當然不是，這裡不需要用雙大括號{{ }}，我們用v-bind指令，如下：

1. <div id="app">
   
2.    <!--在href前用v-bind：修飾-->
   
3.    <a v-bind:href="link">hello官網</a>
   
4. </div>
   
5. <script>
   
6.   let app = new Vue({
   
7.   el:"#app",
   
8.   data:{
   
9.     link:"http://hello.com"
   
10.   }
    
11.   });
    
12. </script>

複製程式碼在檢視中的a標籤，我們在<a>標籤加上v-bind:來修飾href屬性，而它的值就是data中的屬性link。我們來看看解析渲染的html頁面效果。標籤<a>的屬性href的值成功地綁定了data資料link的值，通過v-bind指令，就成功地將資料成功地繫結在檢視的標籤的屬性中。
v-bind 指令的簡寫對於v-bind指令，如果一個標籤中需要繫結多個屬性的話，就得連續寫多個v-bind。問題是沒問題，但vue為了我們的程式碼更簡潔易看，提供了v-bind指令的簡寫，僅需要冒號。原本完整的寫法：

1. <!--完整的寫法-->
   
2. <a v-bind:href="link">hello官網</a>

複製程式碼
簡潔的寫法：

1. <!--縮寫-->
   
2. <a :href="link">hello官網</a>

複製程式碼
此外，需要注意的是：當渲染的屬性值是布林值的時候（true和false），效果就不一樣了，並不是簡單地將true或者false渲染出來，而是當值為false的時候，屬性會被移除。我們試試看：

1. <div id="app">
   
2.     <!--我們用縮寫的語法-->
   
3.     <button :disabled="dis_true">
   
4.         我是true
   
5.     </button>
   
6.     <button :disabled="dis_false">
   
7.        我是false
   
8.     </button>
   
9. </div>
   
10. <script>
    
11.     let app = new Vue({
    
12.     el:"#app",
    
13.     data:{
    
14.         dis_true:true,
    
15.         dis_false:false
    
16.      }
    
17.    });
    
18. </script>

複製程式碼我們通過v-bind指令的縮寫，給兩個button標籤的disabled屬性繫結值，一個值為true，一個值為false，我們來看看效果：我們看到，當屬性值設定成true的時候，disabled的值為解析成“disabled”，當屬性值設定成false的時候，屬性disabled直接被移除掉了。支援javascript表示式上面講到的都是將資料簡單地繫結在檢視上，但事實上，vue還支援我們對資料進行簡單的運算：javascript表示式支援。我們舉3個例子演示一下：1.加減乘除運算：

1. <div id="app">{{ num+3 }}</div>
   
2. <script>
   
3.     let app = new Vue({
   
4.         el:"#app",
   
5.         data:{
   
6.             num:2
   
7.         }
   
8.     });
   
9. </script>

複製程式碼上面的案例，在渲染的時候，並不是直接渲染data的num，而是對num進行的簡單的加法：num+3，渲染的結果為：5。2.三元運算子：

1. <div id="app">{{ ok ? 'yes':'no' }}</div>
   
2. <script>
   
3.         let app = new Vue({

複製程式碼三元運算子計算，上面元算的結果為：“yes”。3.字串拼接：

1. <div id="app">
   
2.         <a :href="'http://'+host">hello官網</a>
   
3. </div>
   
4. <script>
   
5.         let app = new Vue({
   
6.                 el:"#app",

複製程式碼<a>標籤的href屬性的值通過兩個字串的拼接起來.注意：雖然vue支援javascript表示式運算，我們只會在運算比較簡單的情況下才會這麼玩，當運算比較繁瑣複雜的時候，一定要用vue的computed屬性來進行計算。本節小結在檢視繫結資料的方法：Mustache語法（雙大括號語法），繫結純HTML，繫結屬性，支援javascript表示式的寫法，以及表示式寫法和computed區別。