五、指令（3）

一只小熊猫呀

已于 2022-09-27 14:24:13 修改

阅读量4.4k

点赞数

分类专栏： # Vue.js 3.0 从入门到实战文章标签： v-text v-html v-once v-pre v-cloak

于 2022-09-27 14:23:12 首次发布

本文链接：https://blog.csdn.net/GXL_1012/article/details/127070744

版权

Vue.js 3.0 从入门到实战专栏收录该内容

54 篇文章 10 订阅

订阅专栏

本章概要

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 指令了。