vue自定义功能|青训营笔记

82 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第九天

介绍

自定义其实还好,其实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,这个方法接收两个参数,第一参数接收指令的名字,第二个就是你写的简写函数,又或者对象