vue系列2: vue指令总结

1、v-cloak

v-clock解决页面闪烁问题
如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题
将该指令加在html标签中时，可以在该文件中加style属性为display：none，例子如下：

    
{{name}}

2、v-text

 


    

        
++++++++ {{ msg }} ----------

3、v-html

v-clock、v-text、v-html的区别
不替换整个内容，只替换{{ msg }}占位符里面的内容
v-clock能够解决插值表达式闪烁的问题
v-text覆盖元素中原来的整个内容，没有闪烁问题
v-html可以添加html标签

4、v-bind

5、v-on

事件修饰符

5.1)使用 .stop 阻止冒泡

5.2)使用 .prevent 阻止默认行为

    有问题，先去百度

5.3)使用 .capture 实现捕获触发事件的机制

5.4)使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

5.5)使用 .once 只触发一次事件处理函数

    
    有问题，先去百度

5.6).self与.stop的区别

6、跑马灯

  
  

    
    
 
    
{{ msg }}
  

  

7、v-model

  

    
{{ msg }}

    
    

    
    
    
    
  

  

8、简易计算器

  

    

    
      +
      -
      *
      /
    

    

    

    
  

  

9、v-for

9.1）循环普通数组

  

    

    
索引值：{{i}} --- 每一项：{{item}}

  

  

9.2）循环数组对象

  

    
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
  

  

9.3)循环对象

  

    
    
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
  

  

9.4)、迭代数字

  

    
    
    
这是第 {{ count }} 次循环
  

  

9.5)循环中key属性使用

  

    

      Id:
        
      
      Name:
        
      
      
    

    
    
    
    

      {{item.id}} --- {{item.name}}
    
  

  

10、v-if v-show

  


    
    

    
    

    
    

    
    
    
这是用v-if控制的元素
    
这是用v-show控制的元素