基本插值操作指令(一)
1.mustache语法
{{message}}
即双大括号,插值表达式。作用:将data中文本数据插入到HTML中
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},qbj</h2>
<h2>{{firstname+' '+lastname}}</h2>
<h2>{{firstname}} {{lastname}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
firstname:"kobe",
lastname:"bryant",
counter:100
}
})
</script>
</body>
</html>
执行结果:
mustache语法中不仅可以写变量,也可以写简单的表达式
2.v-once
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
该指令后面不需要跟任何表达式(如v-for="")
语法:
<element v-once></element>
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
</body>
</html>
执行结果:
在控制台更改message的值
使用v-once指令的元素并没有响应式地改变
3.v-html
会将{{}}里的字符串按照HTML格式进行解析,并显示对应的内容。
语法:
<element v-html="url"></element>
举例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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=\"https://www.bilibili.com/\">bilibili干杯</a>"
}
})
</script>
</body>
</html>
执行结果:
直接使用{{}}会将字符串直接显示出来,使用v-html指令则会解析成a标签
4.v-text
作用和mustache相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型
语法:
<element v-text="message"></element>
举例:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}},我不好</h2>
<h2 v-text="message">,我不好</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
</body>
</html>
执行结果:
拥有v-text属性的元素会直接将元素内的内容覆盖,并不是很灵活。
实际开发过程中使用mustache语法较多。
5.v-pre
用于跳过这个元素和它子元素的编译过程,用于显示原本的mustache语法
语法:
<element v-pre>{{message}}</element>
举例:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
</body>
</html>
执行结果:
不希望vue解析元素时,使用v-pre就能将元素内容原封不动地展示出来
6.v-cloak
cloak:斗篷
某些情况下,浏览器可能回直接显示出未编译的mustache标签,为了良好的用户体验,可以使用v-cloak指令,在元素被vue解析后,v-cloak属性会被删除,我们就可以利用此特性进行一些操作
语法:
<element v-cloak>{{message}}</element>
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//利用setTimeout延时执行1s模拟卡顿
setTimeout(function () {
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
},1000)
</script>
</body>
</html>
执行结果:
这里使用了setTimeout延时执行1s来模拟卡顿,在这1s中用户就会看到一个未解析的元素,第二个元素因为使用了v-cloak指令,并在style中赋予了display:none的样式,所以没有显示出来
在1s后vue解析元素,并将元素中的v-cloak属性去除,元素便显示出来