Vue 自定义指令

函数式、对象式，都可以设置为全局指令/局部指令

函数式

需求：定义一个 v-big 指令，和 v-text 类似，但是会把绑定的值放大 10 倍

局部指令

// 函数式局部指令
directives: {
    big(element, binding) {
        element.innerText = binding.value * 10
    },
}

big 何时被调用

1. 指令与元素成功绑定时
2. 指令所在的模板被重新解析时

全局指令

// 函数式全局指令
Vue.directive('big', function (element, binding) {
    element.innerText = binding.value * 10
})

---

对象式

需求：定义一个 v-fbind 指令，和 v-bind 功能类似，但可以让其绑定的 input 元素默认获取焦点

配置对象中的常用的三个回调：

1. bind：指令与元素成功绑定时调用
2. inserted：指令所咋元素被插入页面时调用
3. update：指令所在的模板被重新解析时调用

局部指令

// 对象式局部指令
directives: {
    fbind: {
    
        // 指令与元素成功绑定时调用
        bind(element, binding) {
            // 此处 this 是 windows
            element.value = binding.value
        },
        
        // 指令所咋元素被插入页面时调用
        inserted(element, binding) {
            element.focus()
        },
        
        // 指令所在的模板被重新解析时调用
        update(element, binding) {
            element.value = binding.value
        }
    }
}

全局指令

// 对象式全局指令
Vue.directive('fbind', {

    // 指令与元素成功绑定时
    bind(element, binding) {
        element.value = binding.value
    },
    
    // 指令所咋元素被插入页面时
    inserted(element, binding) {
        element.focus()
    },
    
    // 指令所在的模板被重新解析时
    update(element, binding) {
        element.value = binding.value
    }
})

---

自定义指令的命名

1. 指令定义时不加 v-，但使用的时候要加 v-
2. 指令名如果时多个单词，要使用 kebab-case 的命名方式，不要使用 camelCase 的命名方式

---