vue自定义指令

vue局部指令的定义与使用

在某个组件中，部分核心代码片段

<p v-color="'red'">123</p>

export default{
    directives:{
        color:function(el,binding){
            el.style.color=binding.value
        }
    }
}

vue全局指令的定义与使用

在main.js中的代码片段：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  directives:{
      color:function(el,binding){
            el.style.color=binding.value
        },
      custom:function(el,binding){
          ......
      }
  }
})

在指令的不同生命周期进行不同的操作

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  directives:{
      color:{
            bind(el,binding){
                el.style.color=binding.value
            },
            inserted(el,binding){
            }
        }, 
  }
})

demo

vue组件代码片段：

<input type="text" v-focus />

export default{
    directives:{
        focus:{
            inserted(el,binding){
                el.focus();
            }
        }
    }
}