一，原生指令

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>