Vue之自定义指令

自定义指令

场景

在vue 2.0中,有的情况下,你需要对普通DOM元素进行底层操作，这时候就需要用到自定义指令!

除了核心功能默认内置的指令 (v-model 和 v-show) 等，Vue 也允许注册自定义指令。

自定义指令又分为全局和局部指令

全局指令

  //定义全局指令
  
    //el 表示属性所在标签对象
    // bind 表示 指令相关信息数据对象
    
    Vue.directive('lowerpp-model',function (el,bind) {
            console.log(el,bind);
            el.textContent =  '转大写 '  + bind.value.toUpperCase();

    });

局部指令

directives: {
  ' 指令名 不要 v- 开头 ': {
	
  }
}

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

钩子函数参数

注意： Vue中所有的指令，在调用的时候，都以 v- 开头，在定义的时候不需要加 v- 。

我自定义了两个指令 v-lowerpp-model 和 v-downpp-model 用来转换大小写

html

<div id="app1">
    <p v-lowerpp-model="msg1"></p>
    <p  v-downpp-model="msg1"></p>
</div>


<div id="app2">
    <p  v-lowerpp-model="msg"></p>
</div>

打印出的狗子钩子参数

可以看到指定名，以及dom 和 dom元素值

自定义指令js代码

  //定义全局指令
    //el 表示属性所在标签对象
    // bind 表示 指令相关信息数据对象
    Vue.directive('lowerpp-model',function (el,bind) {
            console.log(el,bind);
            el.textContent =  '转大写 '  + bind.value.toUpperCase();

    });

     new Vue({
        el:"#app1",
       data:{
           msg1:"abc abc ",
       },
        directives:{
            //指令名可加可不加引号 ，如有特殊字符需要加 ''
            'downpp-model':function (el,bind) {
                el.textContent = '转小写 ' + bind.value.toLowerCase();
            }
        }

    });


     new Vue({
        el:"#app2",
        data:{
            msg:"abcdfgh ",

        }
    });

如图

全局的全部转为大写，局部的没有转