插值表達式的使用
- 將 data 中的文本數據，插入到HTML中可以通過 Mustache 語法(也就是雙大括號),數據是響應式的
<div id="app">
<h2>Hello {{message}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{number * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'World',
firstName: 'Lan',
lastName: 'Duo',
number: 100
}
})
</script>
v-once
- 該指令后面不需要跟任何表達式
- 該指令表示元素和組件只渲染一次，不會隨着數據的改變而改變。
<h2 v-once>{{message}}</h2>
v-html
- 我們從服務器請求到的數據本身就是一個HTML代碼直接通過{{}}來輸出，會將HTML代碼也一起輸出。
- 該指令后面往往會跟上一個string類型
- 會將string的html解析出來並且進行渲染
<div id="app">
<div>{{link}}</div>
<div v-html="link"></div>
<!-- v-html 將html元素直接渲染到頁面 -->
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
link: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-text
- 作用和 Mustachez 比較相似：都是用於將數據顯示在界面中
- 通常情況下，接受一個string類型
<h2 v-text="message"></h2>
v-pre
- 用於跳過這個元素和它子元素的編譯過程，用於顯示原本的 Mustache 語法
- 如果我們想在頁面上顯示 {{}} 時使用
- 第一個h2元素中的內容會被編譯解析出來對應的內容
- 第二個h2元素中會直接顯示{{message}}
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
v-cloak(cloak: 斗篷)
- 此指令可以解決使用插值表達式頁面閃爍問題
- 如果網速慢，而該標簽內容是變量沒有請求響應回來的時候，頁面上先不顯示該標簽（vue給該標簽加了css樣式），當響應回來的時候改標簽默認將css樣式去除。
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(() => {
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
}, 2000)
</script>
