我们这里name的值为bind,并且context.directiveTransforms对象中有name为bind的转换函数。所以const directiveTransform = context.directiveTransforms[name]就是拿到处理v-bind指令的转换函数,然后赋值给本地的directiveTransform函数。 接着就是执行directiveTransform转换函数,拿到v-bind指令生成的props数组。然后执行properties....
默认还是触发bind和inserted,当点击按钮切换元素的 display 时,结果如下: 即:改变元素的样式的时候触发了update和componentUpdated函数。如果使用 v-if 会触发哪个事件呢? 这是另外一段文字 toggle 结果: 发现unbind被触发,因为 v-if 是删除或者重建 dom 元素,当指令绑定的元素被销毁时,会触发指令的unbind事件,新建...
我们这里name的值为bind,并且context.directiveTransforms对象中有name为bind的转换函数。所以const directiveTransform = context.directiveTransforms[name]就是拿到处理v-bind指令的转换函数,然后赋值给本地的directiveTransform函数。 接着就是执行directiveTransform转换函数,拿到v-bind指令生成的props数组。然后执行properties....
在 main.js 引入并调用 指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化...
inserted:表示元素在插入到DOM中的时候,会执行inserted函数,只执行一次 update:VNode更新的时候调用,可能会调用多次 造成的原因:页面上的任何一个元素想要显示,首先需要浏览器的渲染引擎将元素加载到内存中形成DOM树,也就是说执行bind函数的时候,元素还没有插入到内存中去,因为,一个元素只有插入DOM之后,才会获得焦点。
钩子函数 一个指令定义对象可以提供如下几个钩子函数,这些钩子函数都是可选: bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 unbind:只调用一次,指令与元素解绑时调用。 inserted:被绑定元素插入父节点时调用。 update:所在组件的 VNode 更新时调用,可能发生在其子 VNode 更新之前...
bind:function (el,binding) {//自定义指令时,通过binding拿到值。 el.style.color =’red’ } 三、函数参数 钩子函数被赋予了以下参数: el:指令所绑定的元素,可以用来直接操作DOM。 binding:一个对象,包含以下属性: 1.name:指令名,不包括v-前缀。
接着就是执行directiveTransform转换函数,拿到v-bind指令生成的props数组。然后执行properties.push(...props)方法将所有的props数组都收集到properties数组中。 由于node节点中有多个props,在for循环遍历props数组时,会将经过transform转换函数处理后拿到的props数组全部push到properties数组中。properties数组中可能会有重复的...
对于v-bind指令,其生成的内部表达式会在渲染函数中执行。当指令的参数和绑定的值发生变化时,对应的JavaScript代码片段会被重新执行,从而动态地更新属性的值。 综上所述,v-bind指令的原理是通过生成内部表达式,将属性的值动态地绑定到HTML属性或Vue组件的props上,从而实现属性的动态更新。
关于Vue的v-bind指令还有其他的用法: 1.绑定style属性 2.动态绑定属性名 3.直接绑定对象 1.绑定syle属性 1 普通html的style属性使用 哈哈哈 效果: image.png 2.style中的使用某些值, 值是来自data函数中 2.1 动态绑定style, 在后面跟上对象类型 (重要) Hello...