【学习笔记】06-v-cloak的学习和示例

v-cloak的认识和使用

屏蔽闪动,经常用到v-cloak,Vue解析后,会自动删除v-cloak属性

示例

		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
	<div id="app" v-cloak>
		<h1>{{message}}</h1>
	</div>
	
	<script src="vue.js"></script>
	<script>
		setTimeout(function(){  //延迟解析Vue
			const apt = new Vue({
				el : '#app',
				data :{
					message : '你好,世界',
				}
			})
		},1000)
			
		</script>

显示结果

在这里插入图片描述
备注:如果没有v-cloak屏蔽闪动,会显示{{message}}延迟显示渲染

Vue.js 中,v-pre v-cloak 指令有不同的使用方法场景。 ### v-cloak 指令的使用方法 v-cloak 指令用于解决 Vue 组件在加载过程中可能出现的“闪屏”问题。当 Vue 实例编译完成之前,带有 v-cloak 的元素会保持原样,不会被 Vue 渲染。通常结合 CSS 来隐藏这些元素,直到 Vue 完成编译。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak示例</title> <style> [v-cloak] { display: none; } </style> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <script type="text/javascript"> new Vue({ el: '#root', data: { name: '示例名称' } }); </script> </body> </html> ``` 在上述代码中,CSS 部分 `[v-cloak] { display: none; }` 会隐藏所有带有 v-cloak 属性的元素。当 Vue 实例加载完成后,v-cloak 属性会自动移除,元素就会正常显示,从而避免了“闪屏”问题 [^1][^2][^4]。 ### v-pre 指令的使用方法 v-pre 指令用于跳过其所在节点的编译过程,可利用它跳过没有使用指令语法、没有使用插值语法的节点,这样会加快编译速度。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-pre示例</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root"> <h2 v-pre>这是普通文本,不会被编译</h2> <h2>当前的n值是:{{n}}</h2> <button v-pre @click="n++">点我n+1</button> </div> <script type="text/javascript"> Vue.config.productionTip = false; new Vue({ el: "#root", data: { n: 1 } }); </script> </body> </html> ``` 在上述代码中,带有 v-pre 指令的 `<h2>` 标签 `<button>` 标签内的内容不会被 Vue 编译,会原样显示 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值