1.mustache語(yǔ)法( 也叫雙大括號(hào))
mustache : 英文是胡須 / 胡子的意思,因?yàn)?{{ }} 像人的臉上兩邊的胡子(自行腦補(bǔ))
用法:在html標(biāo)簽中 插入 {{ 變量名 }} ,來(lái)顯示自己要展示的數(shù)據(jù)
注意:mustache語(yǔ)法中可以寫(xiě)簡(jiǎn)單的表達(dá)式
代碼如下:
<div id="app">
<!-- mustache語(yǔ)法中可以寫(xiě)簡(jiǎn)單的表達(dá)式 -->
<h1>
{{firstName + ' ' + lastName}}
</h1>
<h2>
{{msg}}
</h2>
<!-- mustache語(yǔ)法中可以寫(xiě)簡(jiǎn)單的表達(dá)式 -->
<h3>
{{ count * 2}}
</h3>
</div>
<script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
firstName: 'Kobe',
lastName: 'Bryant',
msg: '你好啊',
count: 200
},
methods: {}
});
</script>
mustache展示結(jié)果
2.v-text
特點(diǎn): 和原生js的innerText屬性類(lèi)似,作用和mustache語(yǔ)法一樣,但是沒(méi)有mustache語(yǔ)法那么靈活,因?yàn)樗荒軐?xiě)一個(gè)固定的值,并不能像mustache語(yǔ)法一樣能寫(xiě)表達(dá)式,對(duì)一些字符串進(jìn)行拼接操作等等
注意: 如果標(biāo)簽里有數(shù)據(jù)的時(shí)候,v-text會(huì)先替換原來(lái)的數(shù)據(jù),再展示變量的數(shù)據(jù)
代碼如下:
<div id="app">
<h2 v-text="msg">我是張三</h2>
</div>
<script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-text圖示
結(jié)果并沒(méi)有展示張三,而是替換了原先的內(nèi)容
3.v-html
特點(diǎn):和原生js的innerHTML屬性類(lèi)似,也能在界面中展示數(shù)據(jù)
注意: 1.如果標(biāo)簽里有數(shù)據(jù)的時(shí)候,v-html會(huì)先替換原來(lái)的數(shù)據(jù),再展示變量的數(shù)據(jù) 2.與v-text不同的是,v-html可以解析html標(biāo)簽
v-html圖示
4.v-once
特點(diǎn):具有v-once的標(biāo)簽中的數(shù)據(jù)只在界面上渲染一次
注意:當(dāng)我們?nèi)バ薷膁ata里面的值的時(shí)候,界面的展示數(shù)據(jù)不會(huì)發(fā)生(改變)響應(yīng)式
代碼如下:
<div id="app">
<h2>
{{ msg }}
</h2>
<h3 v-once>
{{ msg }}
</h3>
</div>
<script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-once圖示
注意: 修改了msg的數(shù)值時(shí),被v-once修飾的標(biāo)簽的數(shù)據(jù)沒(méi)有發(fā)生改變
5.v-pre
特點(diǎn):標(biāo)簽具有v-pre,界面會(huì)原封不動(dòng)地展示標(biāo)簽內(nèi)的內(nèi)容,不會(huì)解析mustache語(yǔ)法等
代碼如下:
<div id="app">
<h2>{{msg}}</h2>
<h2 v-pre>{{msg}}</h2>
</div>
<script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-pre圖示
6.v-cloak
特點(diǎn):在界面和數(shù)據(jù)還沒(méi)完全渲染的時(shí)候,它不會(huì)展示,當(dāng)界面和數(shù)據(jù)渲染完成,它才顯示
注意:要使用這個(gè)指令的時(shí)候需要和css的代碼 [v-cloak]{ display: none } 一起配合使用
<style>
[v-cloak] {
display: none;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-cloak>
{{msg}}
</h2>
</div>
<script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
setTimeout(function(){
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊',
},
methods: {}
});
},1000)
</script>
用一個(gè)一秒的定時(shí)器來(lái)檢驗(yàn)一下,一秒后顯示
v-cloak
