5 - Vue 学习笔记 - 其他指令的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53708566/article/details/117778425

其他指令的使用

v-once

在某些情况，我们可能不希望界面随意的跟随改变

这个时候，可以使用一个 Vue 的指令
- v-once
  - 这个指令后面不许需要跟任何表达式
  - 这个指令表示元素和组件*(后续才会学习)*值渲染一次，不会随着数据的改变而改变
```
<div id="app">
	<h2>{{message}}</h2>
	<h2 v-once>{{message}}</h2>
</div>
```
第一个 h2 由于设置了 v-once 所以在 message 更改后，不会发生改变，可以通过控制台测试。

v-html

在某些情况下，我们向服务器请求数据，数据本身就是一个 HTML 代码，这时如果我们直接 {{}} 输出会将 HTML 代码一起输出，所以我们可以通过设置 v-html，来告诉 vue，让 vue 解析出 HTML。

v-html
- 该指令后面往往会跟上一个 string 类型
- 会将 string 的 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: "hello",
			url: "<a href=\"https://www.baidu.comm\">百度一下</a>"
		}
	});
</script>

v-text

v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中
v-text 通常情况下，接收一个 string 类型
通常情况下，我们很少使用 v-text，没有 mustache 好用，mustache 可以拼接一些内容，而 v-text 是直接把内容全部覆盖，比如下面这个样子。第一个 h2 显示 hello,tt，第二个显示 hello

<div id="app">
	<h2>{{message}},tt</h2>
	<h2 v-text="message">,tt</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		}
	});
</script>

v-pre

在某些情况下，我们希望标签里面的值就要原样显示，不需要 vue 解析，这个时候可以设置 v-pre

<div id="app">
	<h2>{{message}}</h2>
	<!-- 下面会显示{{message}} -->
	<h2 v-pre>{{message}}</h2>
</div>

v-cloak

在某些情况下，有时候浏览器在执行时卡住，还没能运行到 vue 的代码，这时如果用户的打开页面，会看到没解析前的页面。我们可以通过 v-cloak 设置样式，让元素解析完后，再显示

v-cloak
- 在 vue 解析之后，v-cloak 会被删除 — cloak:斗篷

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		<!-- 设置不可见 -->
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>

<div id="app" v-cloak>
	{{message}}
</div>

<script src="../js/vue.js"></script>
<script>
	// 在 vue 解析之前，div 有一个属性 v-cloak
	// 在 vue 解析之后，div 中没有一个属性 v-cloak
	// 设置延时，可以看到为解析之前的数据
	setTimeout(function () {
		const app = new Vue({
			el: "#app",
			data: {
				message: "hello"
			}
		});
	}, 1000)
</script>

</body>
</html>