vue的基本使用步骤以及插值表达式的闪烁问题解决办法

使用步骤：

1. 安装vue 通过npm yarn安装

2. 引入vue文件 vue.js

3. 创建Vue实例

4. 在HTML代码中创建视图对应的元素

5. 在视图元素的范围内，通过插值表达式或者指令来使用Vue的功能

  
  
  
  



  

    
我叫{{name}}, 我今年{{age}}岁
  

  
  
  

  

用vue实现一个跑马灯的效果:

  
  
  
  
  


  

    

      {{welcomeWord}}
    
  

  
  

vue的插值表达式的闪烁问题以及解决办法

什么是表达式？

只要能放在等号右边，就是一个表达式

什么是插值表达式？

{{}}  又叫小胡子语法，简单的给页面中插入数据的语法

插值表达式中可以出现的内容：

{{data中的数据名}}

{{ 1 }}

{{ "字符串" }}

{{ true }}

{{ 数据名.方法}} {{name.toUpperCase()}}

等等...

 

 

原因：Vue加载太慢，没人处理插值表达式，直接原样显示在页面上，等Vue加载完了，才会处理，这时数据才会展示出来，会有闪烁的效果出现

解决方案： v-cloak

1. 给元素添加v-cloak指令

2. 在style标签中添加一个 v-cloak的属性选择器样式 display:none

解决的原理： 一开始先隐藏，当Vue加载完了，数据渲染完成，就把v-cloak删掉，数据就显示出来了！

  
    
    
    
    
    
  
  
   
    

      

      


      
      
      
{{name}}