<header class="post-header" style="display: block; color: rgb(85, 85, 85); font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
vue模板語法
</header>
插值
文本
1.“Mustache”語法插值：
html：
<div id="app">
<p>{{ msg }}</p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
2.v-text指令
html
<div id="app">
<p v-text="msg"></p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
3.v-cloak指令
html:
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
解析HTML
v-html指令
使用“Mustache”語法和v-text指令，會對數(shù)據(jù)原格式輸出险胰，即使數(shù)據(jù)為html標(biāo)簽，也會照樣顯示標(biāo)簽本身畏线，不會進(jìn)行解析沼侣，要讓html解析，則需要使用v-html指令闲孤。
html:
<div id="app">
<p v-html="msg"></p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: '<b>Hello Vue.js</b>'
}
});
綁定屬性
綁定屬性使用v-bind指令豪治，比如你綁定class
html:
<div v-bind:class="className"></div>
這樣的話洞拨，data中的className的值就綁定到class中，需要注意的是负拟，如果該值為轉(zhuǎn)換為boolean的結(jié)果為false烦衣，則該屬性會被移除，通過這種方式可以來控制div的顯示或者隱藏等掩浙』ㄒ鳎可惜轉(zhuǎn)換為boolean的值有false，0,0.0,"",[],{}厨姚。
如果你覺得使用v-bind:覺得麻煩衅澈，可以使用縮寫形式:來代替v-bind:，上述代碼縮寫為：
<div :class="className"></div>
對比
對于以上4中方式谬墙，v-html只是為了渲染html標(biāo)簽今布。v-bind用來綁定屬性。而v-text和“Mustache”語法都能渲染普通文本數(shù)據(jù)芭梯，有一點(diǎn)區(qū)別就是险耀，在渲染的數(shù)據(jù)比較多的時候，可能會把“Mustache”語法的大括號顯示出來玖喘，為了解決這種問題，可以采用以下兩種方式：①使用v-text渲染數(shù)據(jù)②使用“Mustache”語法渲染數(shù)據(jù)蘑志，但是同時使用v-cloak指令累奈，在css中贬派，使用：
css:
[v-cloak]: {
display: none;
}
這樣的話，就不會顯示“Mustache”的大括號澎媒。而且搞乏，他們的區(qū)別，還沒有完戒努，不然我們直接用v-text不就行了请敦，還有一點(diǎn)區(qū)別是，v-text渲染數(shù)據(jù)的時候储玫，是渲染全部的數(shù)據(jù)侍筛，也就是說不能渲染局部的數(shù)據(jù)，如下代碼：
html:
<div id="app">
<p v-text="msg"></p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
v-text會把msg的數(shù)據(jù)全部渲染出來撒穷，而往往匣椰，后臺返回的數(shù)據(jù)，不是全部的內(nèi)容端礼，比如以下代碼：
html:
<div id="app">
<p v-text="msg">蘋果的價格為</p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 5
}
});
我們顯示蘋果價格的時候禽笑，往往后臺存儲的只是一個價格，用v-text就無法渲染蛤奥，所以只能用“Mustache”語法佳镜，如下：
html:
<div id="app">
<p>蘋果的價格為{{ msg }}元</p>
</div>
js:
new Vue({
el: '#app',
data: {
msg: 5
}
});
為了防止網(wǎng)絡(luò)慢等原因，在數(shù)據(jù)返回之前凡桥，可能顯示的結(jié)果為:蘋果的價格為{{ msg }}元蟀伸，為了解決這種問題，我們添加v-cloak指令和css代碼：
html:
<div id="app">
<p v-cloak>蘋果的價格為{{ msg }}元</p>
</div>
[v-cloak]: {
display: none;
}
總而言之就是一句話唬血，解析html標(biāo)簽用v-html指令望蜡；綁定屬性使用v-bind指令；渲染大片數(shù)據(jù)用v-text或者“Mustache”語法配置v-cloak指令和css的display: none;拷恨；渲染大片數(shù)據(jù)中的局部用“Mustache”語法脖律，配合v-cloak指令和css。
