Vue中的指令（内置指令、自定义指令）

一、内置指令

1. v-bind

（1） 主要作用：

        单向绑定解析表达式，可简写为 :xxx (v-bind:xxx)，数据只能从data流向页面

（2）代码实现：

  
  
  
  
  


  
  

    
    
    
    单向数据绑定：  

  
  

2. v-model

（1）主要作用：

        双向数据绑定，数据不仅能从data流向页面，还可以从页面流向data

（2）代码实现：

  
  
  
  
  


  
  


    双向数据绑定：  

    
    
    
  
  

3. v-for

（1）主要作用：

        遍历对象、数组、字符串等

（2）代码实现：

  
  
  
  
  


  
  

    
    
人员列表（遍历数组）
    

      
      
      
{{p.name}}-{{p.age}}
 
      
    

    
    
汽车信息（遍历对象）
    

      

        
        {{k}} ----- {{value}}
      
    

    
    
测试遍历字符串（遍历字符串）
    

      

        {{char}} --- {{index}}
      
    

    
    
测试遍历指定次数
    

      

        {{number}} --- {{index}}
      
    
  
  

4. v-on

（1）主要作用：

        绑定事件监听，可简写为 @xxx (v-on:click="")

（2）代码实现：

  
  
  
  
  


  

    
n的值是：{{n}}
    点我让n++(普通写法)
    点我让n++(简写)
  

5. v-if、v-else-if、v-else

（1）主要作用：

        条件渲染（动态控制节点是否存在）

（2）代码实现：

  
  
  
  
  


  
  

    
当前的n值是：{{n}}
    点我n+1
    
    
    


    
    
    

    
    

    
    
  
  

6. v-show

（1）主要作用：

        条件渲染（动态控制节点是否展示）

（2）代码实现：

        可以类别 v-if 、v-else，只是v-show为false的话，只是在页面上不显示，结构存在；v-if为false的话，页面中不显示且结构不存在。

7. v-text

（1）主要作用：

        向其所在的节点中渲染文本；

        与插值语法的区别：v-text 会替换掉节点中的内容，{{xx}} 不会。

（2）代码实现：

  
  
  
  
  


  
  

    
你好，{{name}}
    

    
    

    

  
  

8. v-html

（1）主要作用：

        作用：向指定节点中渲染包含 html结构 的内容。

         与插值语法的区别：

                  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

                  (2).v-html可以 识别html结构。

          严重注意：v-html有安全性问题！！！！

                  (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

                  (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

（2）代码实现：

  
  
  
  
  


  
  

    
你好，{{name}}
    
    

    

    


  
  

9. v-cloak（没有值）

（1）主要作用：

         本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

         使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题(因为vue作用后，v-cloak属性会消失，设置的css样式也将不起作用)。

（2）代码实现：

  
  
  
  
  
  
  


  

  

    
{{name}}
  

  

10. v-once

（1）主要作用：

        v-once所在节点在初次动态渲染后，就视为静态内容了

        以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

（2）代码实现：

  
  
  
  
  


  
  

    
初始化的n值是：{{n}}
    
当前n值是：{{n}}
    点我n+1
    
  

运行结果（初始化的值始终为1，当前值会随着点击按钮而不断增加）：

 

11. v-pre

（1）主要作用：

        跳过其所在节点的编译过程

         可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译（用到插值语法、指令就不要加v-pre）

（2）代码实现：

  
  
  
  
  


  
  

    
Vue学习一定要坚持
    
当前的n值是：{{n}}
    点我n++
  

   

二、自定义指令

1. 自定义指令分为两种：全局指令和局部指令

(1).局部指令：

new Vue({ directives: {指令名：配置对象} }}   或   new Vue({ directives: {指令名：回调函数} }}

 (2).全局指令：

Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

2.代码实现：

  
  
  
  
  


  
  

    
{{name}}
    
当前的n值是：
    
放大10倍后的n值是：

    

    点我让n++