Vue的常用指令

最新推荐文章于 2023-12-09 13:52:07 发布

Love_云宝儿

最新推荐文章于 2023-12-09 13:52:07 发布

阅读量226

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/m0_38084879/article/details/117262809

版权

v-once 响应式编程 v-html v-text Vue指令

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.v-once

once是一次的意思。

vue是响应式的编程。有的人可能就会问，什么是响应式编程？？所谓响应式编程简单的来说就是页面显示随着数据的变化而变化。也就是说，当vue中大data属性中的变量值变化时，页面显示也会随着变，看下面的图

HTML代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1><!--直接取值-->
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"message":"娃儿瑞"
		},
		methods:{
			
		}
	});
</script>

响应式编程图示例：

当页面的变量的值变了，页面显示也变了，这就是响应式编程，如果是jQuery或者原生js的话，变量变化之后，还需要赋值到DOM中才会显示。

扯远了，我们继续说v-once的含义。

上面我们说到了响应式编程，变量值变改了，页面的元素也会跟着改变，那么如果我们有需求是，变量值变了，页面上的元素不变呢？那么我们就用到了v-once了，v-once和v-for不一样，v-once仅仅是一个指令，不需要加参数。来看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<h1 v-once>{{message}}</h1>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"message":"娃儿瑞"
		},
		methods:{
			
		}
	});
</script>

执行效果：

2.v-html

v-html是将我们的变量值翻译成html，比如上述你的message的值为“<a href='http://ww.baidu.com'>百度一下</a>”,如果你直接使用mustache语法显示上面，那么直接会将<a href='http://ww.baidu.com'>百度一下</a>显示出来，如果我们想将它以HTML方式展示出来，需要加v-html。另外 v-html会覆盖原有dom中的内容，直接替换为新的内容。上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{url}}</h1>
			<h1 v-html="url">淘宝网</h1>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"url":"<a href='http://ww.baidu.com'>百度一下</a>"
		},
		methods:{
			
		}
	});
</script>

显示结果：

3.v-text

v-text和v-html类似，只不过v-text会原模原样的显示变量值。（比较简单我就不写代码和示例了）

4.v-pre

v-pre类似于html的<pre>标签，表示不解析mustache语法，把原有的内容直接显示出来，有点类似转义字符，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{url}}</h1>
			<h1 v-html="url">淘宝网</h1>
			<h1 v-pre>{{url}}                        阿斯达四大           撒大声地</h1>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"url":"<a href='http://ww.baidu.com'>百度一下</a>"
		},
		methods:{
			
		}
	});
</script>

结果：

5. v-cloak

clock英文意思为斗篷，这个指令的作用是当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

换句话说，就是解决页面元素闪烁问题。详情可见：https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app，v-cloak也是一个指令，不需要参数。写法与v-once相同。

Love_云宝儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue的常用指令

1.v-onceonce是一次的意思。vue是响应式的编程。有的人可能就会问，什么是响应式编程？？所谓响应式编程简单的来说就是页面显示随着数据的变化而变化。也就是说，当vue中大data属性中的变量值变化时，页面显示也会随着变，看下面的图HTML代码：<html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.j
复制链接

扫一扫