Vue2自定义指令

在Vue2中创建自定义指令有两种方法：函数式创建、对象式创建。

一、函数式创建

    
    
    


    

        
当前的n值是：
        
放大十倍后的n值是：
    
    

二、对象式创建

如果我们希望让某个指令变得全局可用，那么就将指令注册为全局指令。

Vue.directive('fbind', {
    // 指令与元素成功绑定时
    // 第一次的初始化过程
    bind(element,binding){
        element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element,binding){
        element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element,binding){
        element.value = binding.value
    }
})

对于函数式指令的全局化，我们需要考虑一下函数简写形式，这里不过多赘述。

Vue.directive('fbind', function(element,binding){
     element.innerText = binding.value * 10
})

而在Vue3中针对自定义指令的钩子函数改变了，之后会在Vue3专栏中将两者进行对比。