Vue（二十一）自定义指令

总结

一、自定义语法

1、局部指令

a、函数类型（用于比较简单的指令）

new Vue({

            directives:{

                指令名：回调函数

            }

        })

b、对象类型（用于需要一些细微处理时）

 new Vue({

            directives: {

                指令名：配置对象

            }

        })

2、全局指令

a、对象类型： Vue.directive(指令名，配置对象)    

b、函数类型：Vue.directive(指令名，回调函数)

二、配置对象中常用的三个回调函数；

1、bind:指令与元素成功绑定时调用

2、inserted:指令所在元素被插入页面时调用

3、update:指令所在模板被重新解析时调用

三、备注

1、指令定义时不加v- ,使用时要加v-

2、指令名如果是多个单词，要使用kebab-case命名方式（短横杠），不要使用camelCase命名

案例：

需求 1、点击按钮n值放大10倍（v-big） 2、点击按钮n值放大10倍，且input框获的焦点(v-find)

一、局部指令

 二、全局指令（指令分开定义）

 三、指令由多个单词组成时