第六节：教你如何在html中绑定数据
上兩節我們學習了vue的實例知識：
第4節：vue實例的4個常用選項
第5節：vue 實例的生命周期
提醒一下，這兩節的內容在后面實戰的時候很重要，如果落下的同學可以回去翻看學習，不必害怕難學，這里沒有難學的教程。
這一節，我們學習如何在html上綁定我們實例中的數據。
Mustache 語法
什么叫Mustache語法，別被這高大上的叫法嚇到了，其實就是雙大括號{{ }}的寫法，在之前的章節我們就演示過在視圖中顯示我們的數據，這是最常見的綁定方式。有了它，我們可以輕松地在視圖顯示我們的數據并及時自動更新，無需手動控制。
?<div id="app">{{ name }}</div>
?<script>
?let app = new Vue({
??? el:"#app",
??? data:{
??? ?name:"前端君"
??? }
?});
?</script>
?
十分簡單，頁面視圖上也成功顯示我們的data中的name的值：“前端君”。
（再復習一遍）
?
綁定純html
有時候有一種這樣的需求，我們的數據包含了一些html的標簽代碼，比如：?
name:"<strong>前端君</strong>"
?
文本“前端君”被一個<strong>標簽包住，而我們在展示的是，需要合理地渲染strong標簽，再顯示我們想要展示文本內容。這種情況，用原來的雙大括號{{? }}方式，就不能滿足了，它會渲染成這樣：
（這不是我想要的）
<strong>被當作是普通的文本數據被展示了，這并不是我們想要的結果。這個是時候，你需要用vue提供的v-html指令，用法如下：
<div id="app" v-html="name"></div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
?????name:"<strong>前端君</strong>"
??? }
});
</script>
v-html以屬性的形式添加到了div中，值為“name”，也就是我們數據data中的name：
"<strong>前端君</strong>"
?
我們來看看視圖展示的結果：
（這才是我想要的效果）
視圖上的“前端君”有了明顯的加粗效果，說明<strong>標簽發揮了作用，我們通過chrome的開發者工具查看解析生成后的html文檔，name的值，被解析成html標簽，并作為字節點，插入在<div id=”app”></div>中去。
這，就是v-html的作用啦。
?
綁定屬性
前面兩個都是控制視圖展示文本內容，有時候，html標簽的屬性也很重要，比如：<a>標簽的href屬性，<img/>標簽的src屬性等。Vue中如何將data中的數據綁定為這些屬性的值呢？還是用雙大括號{{ ?}}的寫法嗎？
當然不是，這里不需要用雙大括號{{ }}，我們用v-bind指令，如下：
?
<div id="app">
???<!--在href前用v-bind：修飾-->
???<a v-bind:href="link">hello官網</a>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
?????link:"http://hello.com"
??? }
});
</script>
在視圖中的a標簽，我們在<a>標簽加上v-bind:來修飾href屬性，而它的值就是data中的屬性link。我們來看看解析渲染的html頁面效果。
（href屬性的值成功解析出來了）
標簽<a>的屬性href的值成功地綁定了data數據link的值，通過v-bind指令，就成功地將數據成功地綁定在視圖的標簽的屬性中。
?
v-bind 指令的簡寫
對于v-bind指令，如果一個標簽中需要綁定多個屬性的話，就得連續寫多個v-bind。
問題是沒問題，但vue為了我們的代碼更簡潔易看，提供了v-bind指令的簡寫，僅需要冒號。
?
原本完整的寫法：
<!--完整的寫法-->
<a v-bind:href="link">hello官網</a>
?
簡潔的寫法：
<!--縮寫-->
<a :href="link">hello官網</a>
此外，需要注意的是：當渲染的屬性值是布爾值的時候（true和false），效果就不一樣了，并不是簡單地將true或者false渲染出來，而是當值為false的時候，屬性會被移除。
?
我們試試看：?
<div id="app">
???<!--我們用縮寫的語法-->
?? <button :disabled="dis_true">
????? 我是true
???</button>
???<button :disabled="dis_false">
????? 我是false
?? </button>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
????? dis_true:true,
??????dis_false:false
??? }
});
</script>
我們通過v-bind指令的縮寫，給兩個button標簽的disabled屬性綁定值，一個值為true，一個值為false，我們來看看效果：
（第二個button的disbaled屬性被移除了）
我們看到，當屬性值設置成true的時候，disabled的值為解析成“disabled”，當屬性值設置成false的時候，屬性disabled直接被移除掉了。
支持javascript表達式
上面講到的都是將數據簡單地綁定在視圖上，但事實上，vue還支持我們對數據進行簡單的運算：javascript表達式支持。
我們舉3個例子演示一下：
?
1.加減乘除運算：
<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? num:2
??? }
});
</script>
上面的案例，在渲染的時候，并不是直接渲染data的num，而是對num進行的簡單的加法：num+3，渲染的結果為：5。
（結果為：5）
?
2.三元運算符：
<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
? ??????ok:true
??? }
});
</script>
三元運算符計算，上面元算的結果為：“yes”。
（三元運算后的結果為：“yes”）
3.字符串拼接：
<div id="app">
? <a :href="'http://'+host">hello官網</a>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? host:'hello.com'
??? }
});
</script>
<a>標簽的href屬性的值通過兩個字符串的拼接起來，我們看看最后拼接效果：
（字符串拼接成功）
?
注意：
雖然vue支持javascript表達式運算，我們只會在運算比較簡單的情況下才會這么玩，當運算比較繁瑣復雜的時候，一定要用vue的computed屬性來進行計算。
本節小結
在視圖綁定數據的方法：Mustache語法（雙大括號語法），綁定純HTML，綁定屬性，支持javascript表達式的寫法，以及表達式寫法和computed區別。
擴展閱讀
?1.《ECMAScript 6 系列》原創教程
總結
以上是生活随笔為你收集整理的第六节：教你如何在html中绑定数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云炬创业政策学习笔记20210112
- 下一篇： 云炬创业政策学习笔记20210113