VUE探索第六篇-指令(directive)

╰半夏微凉° 2022-04-17 01:13 386阅读 0赞

# 一、什么是指令 #

上一篇我们讲到组件，组件是为了实现代码复用，将业务逻辑，UI模板封装成一个自定义的"标签"供外部使用，但有些时候我们用普通的dom也能实现相关的功能，但需要对功能进行一些"改造",使我们的实现更简洁，此时就会用到我们的指令。

# 二、内置指令 #

vue提供大量的内置的指令，先来总览下这些指令：

v-bind:动态的绑定一个或者多个特性值。

v-on:绑定监听事件，用户监听事件的变化。

v-model:表单组件上的双向绑定，如input

v-show:条件渲染，确定元素的显示或者隐藏

v-html:富文本渲染，作用类似于innerHTML

v-for:循环指令，对修饰的元素或者模板进行循环

v-if,v-else,v-else-if，条件指令，这几条指令配合使用，对元素进行条件渲染。

v-pre，在模板中跳过编译过程，直接输出原始值，如<div v-pre>\{ \{msg\}\}</div>，输出的是"\{ \{msg\}\}"

v-cloak：这个指令保持在元素上直到关联实例结束编译；这个说法有点晦涩，<div >\{ \{msg\}\}</div>，有时会先显示"\{ \{msg\}\}"，然后再显示实际绑定值，导致闪屏，利用v-cloak配合display:none使用，待元素准备完毕后再显示，可解决此问题。

v-once：仅渲染一次，后续的元素将不再渲染。

下面我们对常用的指令的一些使用方法进行说明

# 三、v-bind #

v-bind作为绑定命令，可以使用在属性，样式，以及组件的数据传递。

1、属性

以img的src为例，我们想动态的改变img的地址，那么使用绑定命令，绑定data中的src

<img v-bind:src="src">
    ...
    data:function() {
        return {
            src:require('./assets/logo.png'),
          }
      }

2、样式

有时我们要动态的改变class样式，vue无法直接对css操作，但是通过属性变量可以动态的切换不同的class。如在激活状态下我们要加载名为actionInfo的class，可以有以下几种表达方式。

class直接绑定data的属性，通过watch监听状态并改变属性值，从而改变样式

<div v-bind:class="activeInfo">333</div>
    ...
    data:function() {
        return {
            isActive:true,
            activeInfo:'activeInfo'
          }
      },
      watch:{
        isActive:function(val){
           val?this.activeInfo='activeInfo':this.activeInfo=''
        }
      }
    ...
    .activeInfo{
      border:1px red solid;
    }

我们可以再简单些，在模板中直接采用三元计算(数组模式)

<div v-bind:class="isActive?'activeInfo':''">111</div>

再简单些有没有(对象模式)

还可以对于多条件的class进行操作

<div v-bind:class="[isActive?'activeInfo':'',info]">111</div>
    
    <div v-bind:class="{activeInfo:isActive,info}">2222</div>
    ...
    data:function() {
        return {
            isActive:true,
            activeInfo:'activeInfo',
            info:'info'
          }
      }
    }
    ...
    .activeInfo{
      border:1px red solid;
    }
    .info{
     color: green
    }

除了可以动态改变class样式，也可以动态改变内联的style样式，使用方式和上述一致，只是绑定的属性值是具体的样式，而不是class名而已

<div v-bind:style="{color:color,fontSize:fontSize+'px'}">444</div>
    ...
    data:function() {
        return {
            color:'green',
            fontSize:40
          }
      }

这里要注意下，color，fontSize是js的css对象名，对应的css属性名是color,font-size,也可以用css属性名(需要用单引号)

<div v-bind:style="{'color':color,'font-size':fontSize+'px'}">444</div>

采用数组模式，需要注意的是，数组元素需要是对象。

<div v-bind:style="[color,fontSize]">5555</div>
    ....
    data:function() {
        return {
            color:{
              color:'green'
            },
            fontSize:{
              fontSize:"40px"
            }
          }
      },

3、prop数组传递

父组件给子组件数组传递时，通过绑定父组件的对象，映射到子组件的prop上，这个在[组件][Link 1]中有详细介绍，大家可以查阅。

v-bind输入闲麻烦，有缩写的方法

等价于：

其实v-bind的作用就是声明式渲染，类似于\{ \{activeInfo\}\}，个人认为v-bind的设计有些画蛇添足，何不和声明式渲染合一呢，采用如下的方式就能搞定呢，当然这只是我的一些愚见。

<div class="{
       {activeInfo}}">333</div>

# 四、v-on #

v-on指令监听DOM事件，主要分为两类，一类是对原生事件的监听，如button的click，form的submit等，一类是对自定义事件的监听，这类主要是子组件采用emit发送事件，父组件通过v-on绑定事件进行监听。

首先我们来看下原生事件的监听的例子

<button v-on:click="changeCls">555</button>
    ...
    methods:{
        changeCls:function(e){
          console.log(e);
        }
      }

v-on:click="changeCls"表示监听button的点击事件，处理方法为changeCls，在methods中定义了该方法体，默认传入event事件对象。

也支持内联处理器中的调用方法，可以带上自定义的参数

<button v-on:click="changeCls(name)">555</button>
    export default {
      name: 'App',
      data:function() {
        return {
            name:'click me',
          }
      },
      methods:{
        changeCls:function(name){
          console.log(name);
        }
      }
    }

有时方法中也需要使用原生的事件对象event，比如处理冒泡事件，可以通过$event传入：

<div v-on:click="changeCls('div',$event)">
         <button v-on:click="changeCls('button',$event)">555</button>
      </div>
      methods:{
        changeCls:function(name,event){
          //阻止冒泡
          event.stopPropagation();
          console.log(name);
        }
      }

为了方便处理冒泡，事件捕获等事件，vue提供了事件修饰符，上面的冒泡可以改写为：

<div v-on:click="changeCls('div',$event)">
         <button v-on:click.stop="changeCls('button')">555</button>
    </div>
    methods:{
        changeCls:function(name){
          //阻止冒泡
          console.log(name);
        }
      }

通过加上.stop修饰符，使得代码更加简洁。相关的修饰符如下：

.prevent,同e.preventDefault(),阻止默认行为。

.capture,事件捕获模式。

.self，只有event.target对象是节点本身时才会触发。

.once，仅触发一次

其他还有按键，鼠标等相关事件修饰符，可以查阅相关的用法。

另外对于自定义事件的监听，在[组件][Link 1]中有详细的介绍。

# 五、v-if，v-else，v-else-if #

这几个指令组合一起使用，可以实现条件渲染。在实际项目中，我们经常会遇到根据不同的条件，而实现不同的页面呈现。比如，我们会根据请求返回的结果(成功，失败，其他未知)而展示不同的提示结果。

<div class="info">
          
          <template v-if="result=='success'">
            <img src="./assets/success.png"/>
            <span>操作成功</span>
          </template> 
          
          <template v-else-if="result=='error'">
            <img src="./assets/error.png"/>
            <span>操作失败</span>
          </template> 
          
          <template v-else>
            <img src="./assets/unkown.png"/>
            <span>其他未知</span>
          </template> 
        </div>

当result=success时，看下实际的渲染dom结果:

![20181117165250631.png][]

仅将符合条件的代码模块渲染出来，其他的将不会加入到dom树，通过改变result的值，就可以渲染不同的代码块。

v-show指令也能控制代码块的显示和隐藏。它与v-if有如下的区别。

1、v-show总是将代码块渲染出来，然后控制其隐藏还是显示，所以代码块会在dom树中。

2、v-if仅将符合条件的渲染出来，加入dom树，其他的不会渲染。

所以两者区别与display，visibility原理一样。那实际项目中，应该用哪个呢，一般遵循以下原则：

如果频繁的切换，就用v-show，减少dom操作的开销。反之则用v-if,可以减少dom的节点数。

# 六、v-for #

v-for指令实现列表渲染。列表是实际项目中最常用的组件，使用v-for绑定数组对象，很方便的实现列表渲染。

<ul>
       <li v-for="tab in tabs">{
       {tab.name}}</li>
    </ul>
    
     data:function() {
        return {
            tabs:[
                   {name:'tab1'},
                   {name:'tab2'},
                   {name:'tab3'}
                ]
          }
      },

v-for语法与javascript的一致，很好理解。

有些情况下，我们要为每个元素增加唯一表示key，vue为我们提供可:key指令，配合v-for使用

<ul>
        <li v-for="tab in tabs" :key="tab.id">{
       {tab.name}}</li>
     </ul>
    data:function() {
        return {
            tabs:[
                   {name:'tab1',id:'1'},
                   {name:'tab2',id:'2'},
                   {name:'tab3',id:'3'}
                ]
          }
      },

如果数据没有提供id作为我们的唯一标识，我们也可以使用索引值

<ul>
            <li v-for="(tab,index) in tabs" :key="index">{
       {tab.name}}</li>
          </ul>

v-for也可以对对象进行操作，我们把tabs改成对象模式

<ul>
            <li v-for="(value,key) in tabs" >{
       {key}}---{
       {value}}</li>
          </ul>
    data:function() {
        return {
            tabs:{
              "1":"tab1",
              "2":"tab2",
              "3":"tab3"
            }
    
          }
      },

要特别注意：(value,key)第一个参数是value，第二是key,不能弄反了。

# 七、v-model #

vue支持数据的双向绑定，后台数据对页面元素的绑定，可以通过声明式渲染(\{ \{text\}\})以及v-bind指令实现，页面元素对后台数据的绑定就需要使用v-model了。

页面能改变数据的元素包括input,textarea,select,radio,checkbox等。

<div>msg:{
       {message}}</div>
    <input type="text"  v-model="message" >
    ...
    data:function() {
        return {
            message:''
          }
      },

# 八、自定义指令 #

当提供的这些内置指令不满足你的要求时，用户也可自定义指令，实现对dom的底层操作。比如我们可以自定义指令实现对输入的电话，身份证等进行校验。

*     语法

自定义指令可以分为全局指令和局部指令两种。

全局指令，定义在Vue对象上：

Vue.directive('check',{
        //实现各种钩子
    
    })

局部指令

directives:{
        check:{
          //实现各类钩子
        }
      }

其中,第一个参数，"check"就是指令名，在使用时需要加上"v-"前缀，第二个参数指令的各种钩子，指令的具体实现需要在这些钩子中完成。指令的使用与原生的一致，在元素上增加"v-check"即可。

接下来我们看各个钩子的实现：

Vue.directive('check',{
    	/**
    	 *绑定
    	 *只调用一次，第一次绑定到元素时调用
    	 **/
         bind:function(el, binding, vnode){
         	console.log("bind");
         },
        /**
    	 *插入
    	 *被绑定的元素插入到父节点时调用
    	 **/
    	inserted:function(el, binding, vnode){
           console.log("inserted");
    	},
    	/**
         *组件更新
         *根据获得的新值执行对应的更新,对于初始值也会调用一次
         **/
    	update:function(el, binding, vnode,oldVnode){
           console.log("update");
    	},
    	/**
         *组件更新完成
         **/
    	componentUpdated:function(el, binding, vnode,oldVnode){
           console.log("componentUpdated");
    	},
    	/**
         *解绑
         *只调用一次，指令与元素解绑时调用。
         **/
    	unbind:function(el, binding, vnode){
           console.log("unbind");
    	}
    })

页面加载时执行：

bind

inserted

组件更新时执行

update

componentUpdated

卸载时执行

unbind

其入参包括:

el：所绑定的元素，可以直接进行dom操作

binding：一个对象，包含以下属性：

name：指令名，不包含v-的前缀；

value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；

oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；

expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；

arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；

modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为\{'a':true,'b':true\}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

*  实例

很多同学在实际项目中并不习惯自定义指令，因为很多时候，我们都可以找到其他的解决方案替代。那自定义指令有什么优势呢，我们看到它的钩子入参中都含有el，可以对DOM进行操作。VUE是数据驱动模式，但数据驱动并不是包治百病，有些情况下对DOM操作会更加方便。

下面我们实现一个表单数字型校验的实例，及时校验输入的字符，当非数字字符时给出提示，简便起见，将输入框颜色变红。

<div class="check">
       请输入手机号：<input v-check v-model="message"></input> 
    </div>
    Vue.directive('check',{	
    	/**
         *组件更新
         *根据获得的新值执行对应的更新,对于初始值也会调用一次
         **/
    	update:function(el, binding, vnode,oldVnode){
            var numberReg=/^[1-9]\d*$/;
            if (!numberReg.test(el.value)) {  
                  //校验不通过
                 el.style.border="4px red solid"; 
              } else {  
              	 //校验成功
                 el.style.border="none";
              }
    	}
    })

大家可以考虑下，用一个统一指令实现对身份证，手机号，银行卡的校验。

[Link 1]: https://blog.csdn.net/tcy83/article/details/83213126
[20181117165250631.png]: /images/20220417/290cccec69fd4c91a8d37fa38d356674.png