Vue.js v-cloak的使用

最新推荐文章于 2022-12-04 11:34:18 发布
最新推荐文章于 2022-12-04 11:34:18 发布
阅读量235 收藏
点赞数
分类专栏： Vue学习 文章标签： Vue Vue.js v-cloak cloak
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43789593/article/details/91129709
版权
Vue.js的v-cloak指令用于避免未加载完成时页面闪烁，通过CSS配合实现。它在模板编译完成前应用[v-cloak]样式，推荐使用`visibility: hidden`而非`display: none`，因为后者可能导致元素位置变动。
摘要由CSDN通过智能技术生成

v-cloak的使用

cloak单词意思：遮盖层 它的出现就是为了解决在未加载代码导致的闪烁现象

比如：

<div id="ctr-01">
			<p >{
  {first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’
</div>

  1. （1）对控制域的父元素标签中使用

    <div v-cloak id="ctr-01">
			<p >{
    {first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’
</div>

    （2）在含有插值表达式的子元素标签中使用

    2. 


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  星星lieo
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Vue.js 使用v-cloak后仍显示变量的解决方法

				
			

			

				

					10-17
				

			

		

		

			
				
在Vue.js中，`v-cloak`是一个非常实用的指令，它的主要目的是在Vue实例初始化完成之前隐藏待编译的模板，防止在页面加载过程中出现未渲染的数据绑定（也就是Vue中的变量名）。这有助于保持页面的良好用户体验，避免...

			
		

	



                

              
                



	

		

			

				
					
说说 Vue.js 中的 v-cloak 指令

				
			

			

				

					weixin_45654563的博客
				

				

					03-06
					
					389
					
				

			

		

		

			
				
说说 Vue.js 中的 v-cloak 指令

			
		

	



                


  
              

                


	

		

			

				
					
Vue.js 中的 v-cloak 指令

				
			

			

				

					weixin_49295874的博客
				

				

					06-18
					
					402
					
				

			

		

		

			
				
https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app



			
		

	





	

		

			

				
					
Vue.js中的v-cloak指令

				
			

			

				

					YiFuLi的博客
				

				

					12-02
					
					188
					
				

			

		

		

			
				
一、Vue.js中的v-cloak指令？
可以使用 v-cloak 指令设置样式，当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，可以使用 v-cloak 指令来解决问题。
HTML:
<div id="app">
    <p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1}}</p>
</div>

引入Vue.js:
<script src="./js/vue.js"

			
		

	



		

			
		



	

		

			

				
					
vue.js v-cloak指令

				
			

			

				

					零小唬的博客
				

				

					12-04
					
					103
					
				

			

		

		

			
				
vue.js v-cloak指令

			
		

	





	

		

			

				
					
Vue.js 中的 v-cloak 指令及使用详解

				
			

			

				

					10-17
				

			

		

		

			
				
v-cloak指令是Vue.js中的一个非常有用的指令，它用于防止页面在Vue实例编译完成之前渲染出现未编译的Vue模板代码。这种指令特别适用于那些因为网络延迟或脚本执行缓慢而导致Vue实例加载变慢的场景。在这些情况下，...

			
		

	





	

		

			

				
					
Vue中的v-cloak使用解读

				
			

			

				

					08-31
				

			

		

		

			
				
Vue中的v-cloak使用解读  v-cloak 指令是 Vue.js 中的一个特殊指令，用于隐藏未编译的 Mustache 标签直到实例准备完毕。在本文中，我们将详细介绍 v-cloak 的使用方法、作用和注意事项。  v-cloak 的作用和用法 ----...

			
		

	





	

		

			

				
					
谈谈 Vue.js 中的 v-cloak 指令

				
			

			

				

					qq_45747074的博客
				

				

					06-19
					
					626
					
				

			

		

		

			
				
场景：1.当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。2.当向后台接口请求数据，数据还没有请求过来的时候，出现 “白屏” ，可以使用 v-cloak 进行优化，加上加载 动画/GIF我们可以使用 v-cloak 指令来解决这一问题。【这里主要来说一下 2，如果你想要了解关于 1 的更多 可以点击 这里】


2.内部准备好两个结构


两个结构分别是      “白屏” 时加载的样式、图片等       请求到数据后展示的数据内容


3.设置 

			
		

	





	

		

			

				
					
了解vue.js中的v-cloak指令

				
			

			

				

					weixin_44867704的博客
				

				

					06-07
					
					172
					
				

			

		

		

			
				
了解vue.js中的v-cloak指令
假设这样一种情景，当网络很慢时，网页还在加载Vue.js，导致Vue来不及渲染，这时候页面上就会显示出Vue的源码，这对于用户来说是一种很不好的体验，我们可以通过v-cloak来解决这样的问题，通过v-cloak绑定样式，这些样式会在Vue实例编译结束后，从绑定的HTML中移除。

不添加v-cloak指令：

1.HTML代码：
<div id="app">
    {{context}}
</div>
2.JS代码：
<script&

			
		

	





	

		

			

				
					
【05】vue.js — v-cloak的使用

				
			

			

				

					有心博客
				

				

					09-06
					
					1147
					
				

			

		

		

			
				
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

			
		

	





	

		

			

				
					
VUE.JS中v-cloak 的作用和出现的问题

				
			

			

				

					qq_35588077的博客
				

				

					01-08
					
					1099
					
				

			

		

		

			
				
使用 v-cloak 防止页面加载时出现 vue.js 的变量名

在页面加载时会闪现对应的 vuejs 变量名
这时，我们就可以在标签里加入 v-cloak 防止页面加载时出现 vue.js 的变量名
如下所示：
&lt;div id="rrapp" v-cloak&gt;...&lt;/div&gt;

或
&lt;ul v-cloak v-for="item in items"&gt;
  ...

			
		

	





	

		

			

				
					
v-cloak指令

				
			

			

				

					fushan2012的博客
				

				

					02-22
					
					4213
					
				

			

		

		

			
				
v-cloak

			
		

	





	

		

			

				
					
关于Vue.js 使用v-cloak后仍显示变量的解决方法

				
			

			

				

					leadn的博客
				

				

					12-15
					
					1338
					
				

			

		

		

			
				
v-cloak 用法：

HTML代码：

div v-cloak>
  {{ message }}
div>


CSS代码：

[v-cloak] {
  display: none;
}


这样直至div内变量编译完毕后才会显示。

但有时添加完毕后仍有部分变量会显示，这是怎么回事呢？通过控制台查看，原来是 v-cloak 的display属性被优先级别高的样式

			
		

	





	

		

			

				
					
说说 Vue.js 中的  v-cloak 指令

				
			

			

				

					weixin_34138255的博客
				

				

					11-17
					
					217
					
				

			

		

		

			
				
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
html：
&lt;div id="app"&gt;
    {{context}}
&lt;/div&gt;
复制代码js：...

			
		

	





	

		

			

				
					
vue中v-cloak最详讲解

					
热门推荐

				
			

			

				

					nzz_1214
				

				

					08-17
					
					2万+
					
				

			

		

		

			
				
一、在vue中，渲染普通文本有2种方式：{{}}与v-text，如下：



<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" c

			
		

	





	

		

			

				
					
【VueJS】v-pre & v-cloak & v-once

				
			

			

				

					'Ablaze 的专栏
				

				

					01-04
					
					3972
					
				

			

		

		

			
				
v-pre指令在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。<div v-pre>{{msg}}</div>这时并不会输出我们的msg值，而是直接在网页中显示 {{msg}}v-cloak指令
  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编

			
		

	





	

		

			

				
					
vCenter Server 5 的安装问题：无法使用nslookup解析此完全限定域名

				
			

			

				

					weixin_33728268的博客
				

				

					05-27
					
					490
					
				

			

		

		

			
				
今天在安装vCenter server的时候出现域控上解析完全限定域名问题。摸索了半天终于搞定了，原来需要在DNS 中为之添加一台反向查找的指向。解决办法如下：   1：DNS服务器上从“管理工具”中打开“DNS”管理器，将左侧树列表中展开；选择“反向查找区域”/右键菜单 "新建..."，下一步 2：选择“主要区域”...，下一步，下一步 3：选择“IPV4 反向查...

			
		

	





	

		

			

				
					
vue3 [v-cloak] 使用方法

					
最新发布

				
			

			

				

					05-31
				

			

		

		

			
				
在 Vue.js 3 中，[v-cloak] 指令已经不再需要了，因为在 Vue.js 3 中使用了更加高效的编译器，它会在编译过程中自动处理这个问题。所以，如果你在使用 Vue.js 3，就不需要再使用 [v-cloak] 指令了。  如果你仍然想在...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值