寫在前面的話：
文章是個人學習過程中的總結，為方便以后回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
VUE基礎系列目錄
一.前言
前面《VUE基礎系列（一）——VUE入坑第一篇》中我們講過使用vue雙花括號插值法將data中的數據綁定到模板中（這個實際上可以叫做文本方式的數據綁定）。這篇文章中我們將總結一下vue中其他形式的數據綁定語法。在這篇總結中會有一些vue指令的知識點，可以結合下一篇文章《VUE基礎系列（四）——VUE中的指令（上）》一起看。
二.文本
文本的數據綁定方式前面已經介紹過，這里直接寫一個示例做說明。
#示例代碼
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue模板中的數據綁定語法</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <h1>{{msg}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data:{ msg:'我是一段包含html片段的字符<span>hello</span>' } }); </script> </body> </html>
#界面效果
三.原生html
上面的文本數據綁定，當文本中包含html片段時，html片段已字符串的形式原封不動的展示到了模板中。不會將文本中的html片段解析出來。而vue的v-html指令，就可以將html片段進行解析。
#基本語法
<tag v-html='data中的屬性'></tag>
#示例
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue模板中的數據綁定語法</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <h1 v-html='msg'></h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data:{ msg:'我是一段包含html片段的字符<span>hello</span>', } }); </script> </body> </html>
#界面效果
可以看到模板中<h1 v-html='msg'></h1> 這種寫法，vue會將msg中的html字符解析成DOM節點，並且將msg解析后完整的內容插入到h1元素中。
備注：
1.當我們改變msg的值后，v-html綁定的值在模板中也會同步更新。
2.可以在構造函數外部加入下面的js代碼去驗證，兩秒后頁面上原本的內容會變成"我是新的msg"。
setTimeout(function(){ vm.$data.msg = '我是新的msg'; },2000);
四.將數據綁定到元素的屬性上
將數據綁定到元素的屬性上也是需要結合vue的v-bind指令才能實現。
#基本語法
<tag v-bind:屬性名='data中的屬性'></tag>
#示例
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue模板中的數據綁定語法</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- v-bind --> <div id="box"> <span v-bind:id='desc'>我是一段文字</span> </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data: { desc:'text' } }) </script> </body> </html>
#界面效果
可以看到，data中desc的值已經成功的設置為<span>元素的id屬性上。
備注：
1.當我們改變desc的值后，v-bind綁定的值在模板中也會同步更新。
2.可以在構造函數外部加入下面的js代碼去驗證，兩秒后查看span元素的id會變成new-text。
setTimeout(function(){ vm.$data.desc = 'new-text'; },2000);
五.總結
1.使用雙花括號可以將數據以文本的形式綁定到模板中。數據更新模板同步更新
2.使用v-html指令綁定數據時，可以將數據中的html片段解析為DOM節點。同樣數據更新，模板同步更新。
3.使用v-bind可以將數據綁到元素的屬性上。同樣數據更新，模板同步更新。