14-指令-自定义全局指令

前面学习指令会感觉涉及的难点不多,但是知识点和注意点比较繁琐,这也是大多数语言基础知识的重要特点:繁琐,难于记忆,所以针对这两个特点在之后的指令讲解上,会推出助记图,帮助大家迅速获得该指令的重要信息

一.助记图

image.png

1.问题
如果我们给Vue控制的区域添加autofocus,会发现输入框在刚进入的时候不会自动选中,这是由于Vue控制的区域会重新自定义渲染操作,auto-focus这个属性失效
2.解决
通过Vue.directive("指令名称",对象),自定义指令,在对象中定义函数方法,让函数获取绑定指令的原生JSDOM元素,利用js自带的方法,实现对该元素的属性操作
3.注意点
1."指令名称"在自定义的时候不用加v-,但在使用的时候要加
2.Vue.directive()的第二个参数是一个对象,不是一个函数,我们要在对象中定义声明周期函数
3.给指令赋值,相当于给函数传递参数,要用单引号括起来;并且用函数的binding第二个参数接收传递过来的对象,包含指令的名称binding.name,指令的值binding.value
4.生命周期方法
bind:生成HTML在内存的那段时间
inserted:生成的HTML已经渲染到界面上的事件
5.属性和动作
如果函数中执行的操作是改变DOM的属性,那么在bind生命周期执行就会生效
如果函数中执行的操作是改变DOM的动作,那么在inserted生命周期执行才会生效
4.代码测试

image.png

image.png