Vue框架—指令

1.什么是vue.js指令

   以 v- 开头的特殊属性，作用于html元素，指令提供了一些特性，指定绑定元素，产生不同的行为。

 

V-cloak

v-cloak

解决 插值 表达式闪烁的问题

    
    
    
    
       


      
      
 
           
            
111111{{msg}}111111 
           
        
        
          

不加v-cloak指令之前与加v-cloak指令之后如下图所示：

不加v-cloak:浏览器会将HTML中插值表达式显示出来，该代码端显示的插值表达式为{{msg}}

加v-cloak：解决了插值表达式显示的问题

我们发现如果在{{msg}}前后添加内容，该指令不会覆盖P元素中的原本内容。

v-text

默认 v-text无插值表达式闪烁的问题，

会覆盖标签元素中原本的内容

    
    
    
        


      
      
 
           
            
你好帅 
           
        
        
          

V-text指令使用效果如下，当页面刷新的时候并不会出现元素中插值表达式显示的问题，但是会覆盖元素中的内容，例如下图“你好”一词没有显示。

v-html

将数据当做HTML来解析

不存在插值删除的问题

效果如下图所示：

v-bind

属性绑定机制

简写方式用 : 代替

v-on

事件绑定机制

简写方式用 @ 代替

代码如下

效果展示：

v-if ="expression"

v-if：条件渲染指令，根据表达式true与false 来添加和删除元素，每次重新添加或删除元素 如果结果为true，显示用户数据 如果结果为false，删除元素，也就是将元素转换成注释

语法： v-if ="expression" expression是一个bool返回值的表达式

效果如下：

v-show：每次不会重新进行DOM元素的删除和创建，始终渲染到html，只是切换了元素的dispaly:none 样式

效果如下：

使用情况： 

v-if：有较高的切换性能消耗，如果元素涉及到频繁切换，不用v-if，用v-show。 v-show：有较高的初始渲染消耗

如果元素永远不被显示出来，被用户看到，推荐使用v-if

v-else

指令必须跟一个v-if 或v-show 元素后，否则不能够被识别

 

效果如下：

2.自定义指令

  自定义指令自带三个方法：

效果如下：