vue 自定义指令

一、操作步骤

        1.注册自定义指令

                 1.1全局注册

//全局注册 在main.js中编写如下代码

//注册自定义指令
Vue.directive('指令名',{
    //inserted 在元素添加到页面时执行此操作
    "inserted"(el){
    //指令所需要做的操作 （这里是让当前的dom元素聚焦）
     el.focus;
    }
})

                 1.2局部注册

export default {

directives:{
    '指令名':{
        //当元素添加到页面时，执行此操作
        inserted(el){
            el.focus
        }
    }
}

        2.使用自定义指令

 <input v-'指令名'>

//如果注册的指令名为 foc,则这样使用
 <input v-foc>

二、使用进阶，给自定义指令传递参数

<template>
  <div>
    //给自定义指令 v-foc赋值 
    <input v-foc = "name">
  </div>  
</template>

<script>
export default {
data(){
    return{
         name : ''
    }
},
//注册自定义指令
directives:{
//指令名
    'foc':{
        //inserted 当元素添加到页面时，执行此操作
        inserted(el,binding){
            //binding.value可以获取自定义传递的指令的值
            el.innerHTML=binding.value
            el.focus
        },
        //update 当元素更新时执行此操作
        update(el,binding){
            el.innerHTML=binding.value
            el.focus
    }
}

}