这是我参与「第四届青训营 」笔记创作活动的第九天
介绍
自定义其实还好,其实vue已经给了一些比较好的方法让你灵活操作了,但是有些复杂的东西,比如说你碰到这个,改变另一个,vue给的就已经有限来,所以还是比较考dom的基础
内容
-
属性名叫做directives
-
directives里面有两种写法,第一种是写成对象,另一种是写成函数,其中函数是一种简写方式
-
里面放的是你想要使用的指令的名字,不用加上v-xxx
-
本质上指令就是函数,不管是在对象中的函数还是简写函数都会接收两个参数
-
第一个参数是获取调用了该指令的dom元素,我们一般定义他为element
-
第二个参数是获取该dom元素的一些属性,这些属性貌似是vue一开始给你控制好。我们一般定义为binding
-
在对象中函数的名字不能随意定义,有特定的名称
-
bind,bind是指指令于元素成功绑定的时候
-
inserted,inserted是指元素放到页面dom元素上面的时候
-
update,update是指当vue重新解析模板的时候调用
-
这几种调用的函数能适应所有的需求,而单纯的写成简写函数会让一些特定需求出现问题,比如说点击事件想要在一开始就执行。至于为什么简写模式不能实现,那是因为简写模式忽略掉了inseted这种情境,
-
然后如果你在你想要添加的dom元素里面添加指令时,在它后面添加的变量名将会添加到该dom元素的expression属性内,
-
什么时候该指令会被调用?
-
简写模式下,vue在一开始元素对象和指令绑在一起的时候会被调用
-
当vm每次解析模板的时候就会被调用
-
指令可以写成全局指令
-
道理应该是直接写成vue父类的一个默认方法
-
vue给了一个方法
-
vue.directive,这个方法接收两个参数,第一参数接收指令的名字,第二个就是你写的简写函数,又或者对象