自定义指令

一，原生指令

v-bind:属性名="变量名"

v-on:事件名="函数名"

缩写模式：

:属性名="变量名"

@事件名="函数名"

示例：

<input type="text" v-bind:disabled="isDisabled" v-on:change="change"/>
 
<input type="text" :disabled="isDisabled" @change="change"/>
 
<script>
export default {
    data() {
        return {
            isDisabled: true
        }
    },
    methods: {
        change(event) {
            console.log(event)
        }
    }
}
script>

二，动态属性名

:[属性变量名]="变量名"

@[属性变量名]="函数名"

示例：

<input type="text" :[key]="isDisabled" @[eventName]="change"/>

三，自定义指令

通常会在main.js中注册全局的自定义指令。

主要语法：

Vue.directive(指令名，{ 钩子函数名称: 钩子函数 })

钩子函数：

• bind - 只调用一次，在指令第一次绑定到元素的时候调用。通常可用来做一些初始化操作
• unbind - 只调用一次，指令与元素解绑时调用
• inserted - 被绑定元素插入父节点时调用（只能保证父节点存在，但不一定插入到文档中）
• update - 所在的组件的虚拟dom更新时候调用（但是可能发生在他的子组件虚拟dom更新前）
• componentUpdated - 所在组件和子组件的所有虚拟dom全部更新完成后调用

钩子函数的参数：

• el - 被绑定的节点
• biding - 存储信息的对象，包含的属性有

                        name：指令名(不包含v-前缀)

                        value：绑定的指令值(例如v-my="value")

                        oldValue：指令绑定的前一个值(仅在update和componentUpdated 钩子中可用)

                        expression：字符串形式的指令值的表达式(例如v-my="1+1" => 值为："1+1")

                        arg：传给指令的参数

                        modifiers：包含修饰符的对象

• vnode - vue编译生成的虚拟节点
• oldVnode - 上一个虚拟节点（仅在update和componentUpdated 钩子中可用）

示例：

// main.js
// 自定义指令-防止重复点击
Vue.directive('preventReClick', {
    inserted (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 3000);
            }
        });
    }
});
 
// template
<el-button type="primary" @click="submit()" v-preventReClick>提交el-button>