• 欢迎光临~

Vue自定义指令

开发技术 开发技术 2022-10-27 次浏览

Vue自定义指令

实例hc:

<div id='app'>
       <input type="text" v-test>
       <button @click="isShow=!isShow">按钮</button>
       <p v-show="isShow">文字</p>
   </div>

全局自定义指令

语法:Vue.directive("自定义名字",{钩子函数})

Vue.directive与New Vue({}) 同级

钩子函数: 不需要主动调用的函数,在某个特定的场景下自动调用函数。

  1. bind:只调用一次,指令第一次绑定到元素时调用。

  2. update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前 (当数据变化时 dom更新时)。

  3. inserted:被绑定元素插入父节点时调用 ,dom创建完成时触发 。

 

每个钩子函数都拥有两个形参

  1. el:指令所绑定的元素,可以直接操作DOM ,就是谁调用自定义方法就绑定谁

  2. binding:一个对象,即为=后的 "对象"

Vue.directive('changeshow',{
           bind(el,binging){
               //此时的el绑定的就是:<div>
               //binging即为:v-changeshow="isShow"的"isShow"
         el.style.display=binging.value ? 'block' :'none';
          },
           update(el, binging) {
               el.style.color="red";
          }})
       new Vue({
           el:'#app',
           data:{
                 isShow:true  //设置一个值用以控制开关
          }})

 

局部自定义指令

注意,局部自定义指令只能存在于当前el绑定的元素当中

//语法:
new Vue({
           el: '#app',
           data: {isShow:true  //设置一个值用以控制开关},
           directives: {
               "自定义函数名称": {
                    bind(el, binging) {},
                    update(el, binging) {}
              }

!!因为是局部的方法,所以Vue中el没绑定的元素就无法使用此元素内的自定义函数名称

 
程序员灯塔
转载请注明原文链接:Vue自定义指令
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com