1.Mustach
Mustach语法就是{{ }},所以也有人直接叫双括号语法
<div id="app">
<h1>{{message}}</h1>
<h1>{{message}},bye!</h1>
<h1>{{message + ' ' + message}}</h1>
<h1>{{message}} + ' ' + {{message}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'good night'
}
})
</script>
image.png
2.v-once
当我们希望页面中的数据只保持第一次渲染出的效果,不需要支持响应式的操作时,就可以使用v-once的属性
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>{{message}}</h1>
</div>
在控制台修改message的值时,添加了v-once的h1中的值没有跟着变化,仍然展示着最初的数据
image.png
3.v-html
当后台传给我们的数据是个标签时,直接用Mustach展示的是未经解析完整的标签
<div id="app">
<h1>{{url}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'good night',
url : <a href="http://www.baidu.com">百度一下</a>
}
})
</script>
image.png
那我们希望展示按照HTML格式进行解析,并显示出相应的内容,就需要使用v-html指令
<div id="app">
<h1 v-html=url></h1>
</div>
image.png
4.v-text
v-text能展示出文本信息,但是和Mustach相比不够灵活
<div id="app">
<h1 v-text=message></h1>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'good night',
}
})
</script>
image.png
5.v-pre
v-pre能将数据不经过Vue的解析原封不动的展示出来
<div id="app">
<h1>{{message}}</h1>
<h1 v-pre>{{message}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'good night',
}
})
</script>
image.png
6.v-cloak
在Vue解析前,div会有一个v-cloak属性
在Vue解析后,div没有一个v-cloak属性
cloak是斗篷的意思,当遇到js文件没有解析完时,包含有Vue语法的HTML元素就像添加了v-pre的属性一样原封不动的展示数据,在js文件解析完成时,带有Vue语法的HTML代码会通过解析后生成相应的数据被展示出来,这个过程会有一个闪现的效果,用户体验感不好,所以给HTML元素添加v-cloak指令,并给带有v-cloak属性的HTML元素的样式设为dispaly:none,在js文件解析完后,v-cloak属行就会消失,想斗篷一样把自己罩住,display的样式也会失效,数据会通过Vue的解析展示出来。
可以用定时器的方式展示v-cloak的效果
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
setTimeout(function(){
var app = new Vue({
el : '#app',
data : {
message : 'good night',
}
})
},1000)
</script>
页面会在1秒后展示出good night,也因为v-cloak属行,在js没有解析完时,将数据用css的方法隐藏,没有显示出{{message}},在1秒后js解析完毕,v-cloak的属性会自动消失,数据通过解析展示出good night。
image.png
网友评论