本章概要
- v-text
- v-html
- v-once
- v-pre
- v-cloak
- v-slot
5.1.7 v-text
v-text 指令用于更新元素的文本内容(即元素的 textContent 属性)。
例5-12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<span v-text="message"></span>
<!-- 等价于
<span v-text>{{message}}</span>
-->
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Hello Vue.js'
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果如下:
<span>Hello Vue.js</span>
如果只是更新文本内容中的其中一部分,那么还是用 {{ Mustache }} 插值形式
5.1.8 v-html
v-html 指令用于更新元素的 innerHTML ,该部分内容作为普通的 HTML 代码插入,不会作为 Vue 模板进行编译
例5-13
<div v-html="hElt"></div>
<script>
const vm = Vue.createApp({
data(){
return {
hElt:"<h1>ga beng cui</h1>"
}
}
}).mount("#app")
</script>
渲染结果如图
注意:
在网站上动态渲染任意的 HTML 是非常危险的,因为很容易导致 XSS 攻击。切记,只在可信的内容上使用 v-html,永远不要在用户提交的内容上使用 v-html。
5.1.9 v-once
v-once 指令可以让元素或组件只渲染一次,该指令不需要表达式。之后再次渲染时,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
例5-14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
title: 'v-once指令的用法',
navs: [
{name: '首页', url: '/home'},
{name: '新闻', url: '/news'},
{name: '视频', url: '/video'},
]
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果如下:
v-once 指令在首次渲染时,是看不出有什么不同的。下面切换到 Console 窗口,输入以下语句并按回车。
vm.navs.push({name:'论坛',url:'/bbs'})
此时发现页面没有任何变化,如图
这就是 v-once 指令的作用,只渲染一次,渲染的结果在之后作为静态内容而存在。
5.1.10 v-pre
v-pre 指令不需要表达式,用于跳过这个元素及其所有子元素的编译。v-pre 指令可以用来显示原始 Mustache 。对于大量没有指令的节点使用 v-pre 指令可以加快编译速度。
例5-15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-pre>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: '我有一座冒险屋',
}
}
}).mount('#app');
</script>
</body>
</html>
运行上述页面,渲染结果为:{{message}}
5.1.11 v-cloak
v-cloak 指令也不需要表达式,这个指令保留在元素上直到关联的组件实例编译结束,编译结束该指令被移除。当和 CSS 规则(如[v-cloak]{dispaly:none})一起使用时,这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
例5-16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Vue.js无难事'
}
}
}).mount('#app');
</script>
</body>
</html>
浏览器在加载页面时,如果网速较慢或页面较大,那么浏览器在构造完 DOM 树后会在页面中直接显示{{message}} 字样,直到 Vue 的 JS 文件加载完毕,组件实例创建、模板编译后, {{message}} 才会被替换为数据对象中的内容。
在这个过程中,页面是会有闪烁的,这给用户的体验很不好。如果加上一项 CSS 规则:[v-cloak]{display:none},配合v-cloak 指令一起使用,就可以解决这个问题。
在使用 Vue.js 独立版本的页面开发中,使用 v-cloak 解决初始化慢所导致的页面闪烁是非常有效的。但是在较大的项目中,由于倒是采用模块化的开发,项目的主页面只有一个空的 div 元素,剩下的内容都是由路由去挂载不同的组件来完成的,也就没必要使用 v-cloak 指令了。
5.1.12 v-slot
v-slot 指令用于提供命名的插槽或需要接收 prop 的插槽,详细内容参考本专栏下的:《十、组件》 中的10.6.3-4小节