Vue(10)——自定义指令

自定义指令

自定义指令：可以封装一些dom操作，扩展额外功能。

全局注册-语法：

Vue.directive('指令名',{

  "inserted"(el){     inserted指指令所绑定的元素被添加到页面时自动调用

  //可以对el标签扩展额外功能

    el.focus()

  }

})

局部注册-语法：

directives:{

  "指令名":{

    inserted(){

      el.focus()

    }

  }

} 

使用时v-指令名 。

---

全局注册示例：

局部注册示例：

 

自定义指令的值 

语法：在绑定指令时，可以通过“等号”的形式为指令绑定的具体数值。

<div v-color="color">我是内容</div>

通过binding.value可以拿到指令值，指令值修改会触发update函数

  directives:{

    color:{

      inserted(el,binding){

        el.style.color = binding.value

      },

      update(el,binding){

        el.style.color = binding.value

      }

    }

  }

 

<template>
  <div>
    <h1 v-color="color1">自定义指令</h1>
    <h1 v-color="color2">自定义指令</h1>
  </div>
</template>

<script>
export default{
  directives:{
    color:{
      inserted(el,binding){
        el.style.color = binding.value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  },
  data(){
    return{
      color1:'red',
      color2:'blue'
    }
  }
}
</script>