1-7.Vue内部指令之v-pre&v-once&v-cloak

最新推荐文章于 2024-02-23 00:00:00 发布

落叶~

最新推荐文章于 2024-02-23 00:00:00 发布

阅读量243

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_43913219/article/details/103991019

版权

Vue学习专栏收录该内容

44 篇文章 2 订阅

订阅专栏

Vue入门

vue内部指令---------v-pre & v-cloak &v-once指令

v-pre指令：跳过vue的编译，直接输出原始值。在标签中加入v-pre就不会输出vue中的data值了
v-cloak指令：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
v-once指令：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

v-pre指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-pre指令&v-cloak指令&v-once指令</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>这是data里面的数据：{{messages}}</p>
			<p v-pre>这是data里面的数据，但是加了v-pre指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					messages:'我是一个v-pre指令测试'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
使用了v-pre指令后，将直接输出原始值，不进行vue编译

v-cloak指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-pre指令&v-cloak指令&v-once指令</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>这是data里面的数据：{{messages}}</p>
			<p v-cloak>这是data里面的数据，但是加了v-cloak指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					messages:'我是一个v-cloak指令测试'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
附：
因为加载的原因，可能看不出v-cloak指令的效果，但是v-cloak指令是在整个DOM渲染完才显示的。
可以使用 v-cloak 指令来解决屏幕闪动的问题
例子：
在css中：

 [v-cloak]{
  display: none;
 }
 <div id="app" v-cloak>
  {{context}}
 </div>

v-once指令

v-once指令只进行一次渲染，渲染完成后就是静态的了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-pre指令&v-cloak指令&v-once指令</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--<p>这是data里面的数据：{{messages}}</p>
			<p v-pre>这是data里面的数据，但是加了v-cloak指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>-->
			<p v-once>这是vue的测试内容:{{messages}}</p>
			<input type="text"  v-model="messages"/>
			<p>这是vue的测试内容，实现了数据源的绑定：{{messages}}</p>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					messages:'我是一个v-cloak指令测试'
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

落叶~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-7.Vue内部指令之v-pre&v-once&v-cloak

Vue入门vue内部指令---------v-pre & v-cloak &v-once指令v-pre指令：跳过vue的编译，直接输出原始值。在标签中加入v-pre就不会输出vue中的data值了v-cloak指令：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，v-once指令：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程...
复制链接

扫一扫