自定义指令调用的时机:
1.指令与元素成功绑定时
2.指令所在的模板被重新解析时
定义语法:
1.局部指令:
directives:{ 指令名:配置对象 } 或 directives:{ 指令名:回调函数 }
2.全局指令:
Vue.directive(‘指令名’,配置对象) 或 Vue.directive(‘指令名’,回调函数)
配置对象中常用的三个回调:
1.bind:指令与元素成功绑定时调用。
2.inserted:指令所在元素被插入页面时调用
3.update:指令所在模板结构被重新解析时调用
备注:
1.指令定义时不加v-,但使用时要加v-
2.指令名如果是多个单词,要使用kebab-case命名(如user-name),不要用camelCase命名(userName)

一个实际应用案例:elementui 远程搜索,下拉加载更多,通过懒加载实现,添加去抖减少消耗


遇到的问题:因为远程搜索可能有选中的项,比如选中的项是第十三条,但是懒加载首次只加载了十条数据,这样一来选中的项无法展示出来,展现出来的是没有文字的框。我解决的方法是,将选中的项从数组中提取出来,添加到首次加载的数组里前面,这样点开远程搜索,上方展示的就是已经选中的内容。对剩下的数组进行遍历,如果数组中的内容含有选中项,已经加载过了,那么将这项从数组中删除,然后将数组添加到加载出来的数组中,可能比较麻烦,但是是我能想出来的唯一办法了,但是公司需求改了,代码被删了,上方是远程搜索的代码。
