插值操作:将vue实例中data里面的某个值,插到页面DOM元素上进行显示。 并改变data值可以动态改变显示。
1、Mustache
1.Mustache (胡子/胡须)
可以通过Mustache语法(也就是双大括号{{}})来进行插值操作;
数据绑定最常见的形式就是使用“Mustache”语法的文本插值
2.Mustache语法,不仅仅可以直接写变量,也可以写简单的表达式
<div id="app">
<h2>{{message}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊!',
firstName: 'koby',
lastName: 'bryant',
counter: 100
}
})
2、指令v-once
(1)作用:该指令表示元素和组件只会被渲染一次,之后不会随着数据的改变而改变;
即插值后,该指令所在的DOM元素中的插值内容只显示最开始的数据,不会变化。
(2)使用场景:在某些情况下,我们可能不希望界面随意的跟随改变,这个时候指令v-once,该指令后面不需要跟任何表达式,直接放上去就可以了。
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊!'
}
})
</script>
3、指令v-html
(1)作用:可以将string内容进行解析,以html的形式展示出来,进行渲染。
(2)使用情况:
某些情况下,我们从服务器请求到的是一个HTML代码(带标签),如果我们直接通过{{ }}来输出,会将HTML代码以字符串的格式插入到页面。如果我们希望将内容按照HTML格式进行解析,则可以用v-html指令
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊!',
url: '<a href="http://www.baidu.com">百度一下</a>'
//数据可能带标签,也可能是其他形式,则正常展示出来全是字符串;
//v-html指令:对url进行解析,以html的形式来展示url,即为a标签
}
})
</script>
4、指令v-text
(1)作用:与Mustache比较相似,都是用于将数据显示在界面中;
(2)区别:Mustache后面可以任意拼接其他内容;指令v-text会将后面拼接的内容给覆盖掉;
<div id="app">
<h2>{{message}}朋友</h2> // 显示:你好啊!朋友
<h2 v-text="message">朋友</h2> // 显示:你好啊!(朋友)被 (v-text的值你好啊!)覆盖
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊!'
}
})
</script>
5、指令v-pre
用于跳过该元素和它子元素的编译过程,显示原本的内容。
即vue实例不去解析该元素中的内容,不按照data的内容显示数据,显示原本内容;
<div id="app">
<h2>{{message}}</h2> // 显示:你好啊!
<h2 v-pre>{{message}}</h2> // 显示:{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好啊!'
}
})
</script>
6、指令v-cloak
(1)作用:可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。通常是和CSS的display:none结合使用。
(2)使用场景:在执行vue实例前,如果当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码, 等执行vue实例后会再变成data对应的内容,这样体验感就不太好。我们可以使用 v-cloak 指令来解决这一问题。
(3)总结:在vue解析前指令v-cloak会起作用,设置内容不显示,在vue解析后v-cloak不会起作用,则显示出data中对应的数据。 (则不显示html中原本的内容,直接显示出解析后的数据)
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 在vue解析之前,div中有一个属性v-cloak,设置一个样式display:none,让{{message}}不显示出来;
// 在vue解析之后,div中没有属性v-cloak,则属性样式无作用,则显示解析的内容;
setTimeout(function () {
const app = new Vue({
el: "#app",
data: {
message: '你好啊!'
}
})
}, 1000)
</script>