Vue之自定义指令

青旅半醒 2023-06-03 04:52 17阅读 0赞

## 自定义指令 ##

场景

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

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

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

### 全局指令 ###

### 局部指令 ###

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]

### 钩子函数参数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]

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

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

html

### 打印出的狗子钩子参数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]  
可以看到指定名，以及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 ",
    
            }
        });

如图

![在这里插入图片描述][20191005185501730.png]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]: /images/20230601/e716d1314542414990db956ce8bdd9d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]: /images/20230601/af922454bb814d0d9ef7a626ce2bc835.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]: /images/20230601/f010e8d5de7841b592d28ff74c4719f0.png
[20191005185501730.png]: /images/20230601/1eadd9d12a634a0ba63c7e8e05406e00.png