Vue 2.0 自定义指令

自定义指令

自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.

自定义指令，可以全局和局部注册，

1. 全局自定义指令

全局自定义指令需要使用 全局 API Vue.directive( id, [definition] ) definition 可以是 函数和 json对象

自定义指令有5个钩子函数

Vue.directive('hello',{
    bind(el,binding){
        alert('只调用一次,指令第一次绑定到元素时调用，可执行初始化操作')
    },
    inserted(){
        alert('被绑定元素插入DOM时调用')
    },
    update(){
        alert('被绑定元素所在模板更新时调用')
    },
    componentUpdated(){
        alert('被绑定元素所在模板更新完成后调用')
    },
    unbind(){
        alert('只调用一次指令与元素解绑时调用')
    }
})

钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象包含以下属性
  • name：指令名，不包括 v- 前缀
  • rawName：指令名 包含 v-
  • value：指令绑定值 比如v-hello='name' 绑定值就是vue data对象里 的name值
  • expression：指令绑定值的字符串形式
  • arg：传给指令的参数 v-hello:aaa='name' aaa就是参数 aaa是自己定义的
  • modifiers：一个包含修饰符的对象例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

注意： val 指令绑定值 只能是 vue实例下 data对象的数据 arg 参数是自己随便定义的

查看钩子函数和参数演示

自定义指令语法简写

以上自定义指令语法 有些繁琐 vue.directive() 允许你传入一个函数 相当于 bind 和 update

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

实例

1. 使用自定义指令做一个输入框自定聚焦

Vue.directive('focus',{
//被绑定元素插入DOM时触发
  inserted:function(el){
    el.focus()
  }
})

new Vue({
  el:'#app',
})

查看实例演示

2. 使用自定义指令做元素拖拽

Vue.directive('drag',function(el){
    el.onmousedown=function(e){
        var w = e.clientX - el.offsetLeft
        var h = e.clientY - el.offsetTop
        document.onmousemove=function(e){
            var x = e.clientX-w;
            var y = e.clientY-h;
            el.style.left=x+"px"
            el.style.top=y+'px'
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup =null
        }
    }
})
var vm = new Vue({
    el:'#app',
})

拖拽指令演示