[TOC]
自定义指令总结:
一、定义语法
(1)局部指令:
new Vue({
directives:{
指令名:配置对象 或
}
})
或
new Vue({
directives:{
指令名:回调函数
}
})
(2)全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素绑定陈功时调用
(2).inserted:指令所在元素被插入页面时调用
(3).update:指令所在模板结构被重新解析时调用
三、备注
1.指令定义时不加v-,但使用时要加v-
2.指令名如果是多个单词,则要使用kebab-case命名方式,
不要使用camelCase命名(驼峰)
自定义指令的坑:
多个单词命名时,不推荐使用 ==驼峰命名法==
why ?
当你写成 v-bigNumber ,vue会将其转化为 v-bignumber
当你在directive中使用时就要写
bignumber(){}
Vue推荐的是what?
使用 ‘-‘ 进行分隔 v-big-number
在directive配置时,
‘big-number’:function(){}
tip : 在书写对象 时,原本的写法就是
——–>”key”:value
只是我们经常使用简写
———————->big(){}
但简写不支持-这种符号
so,需要写回本来的形式
—————–’big-number’:function(){}
**==局部指令==**只能在同一个Vue实例中使用
how?配置全局
Vue.directive(‘name’,function/Object)