贵州住房和城乡建设局网站,网站开发html,棋牌网站建设,网站建设-好发信息网描述下Vue自定义指令 #xff08;1#xff09;自定义指令基本内容#xff08;2#xff09;使用场景#xff08;3#xff09;使用案例 在 Vue2.0 中#xff0c;代码复用和抽象的主要形式是组件。然而#xff0c;有的情况下#xff0c;你仍然需要对普通 DOM 元素进行底层… 描述下Vue自定义指令 1自定义指令基本内容2使用场景3使用案例 在 Vue2.0 中代码复用和抽象的主要形式是组件。然而有的情况下你仍然需要对普通 DOM 元素进行底层操作这时候就会用到自定义指令。 一般需要对DOM元素进行底层操作时使用尽量只用来操作 DOM展示不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新如必须修改可以在自定义指令中使用keydown事件在vue组件中使用 change事件回调中修改vue数据;
1自定义指令基本内容
全局定义Vue.directive(“focus”,{}) 局部定义directives:{focus:{}} 钩子函数指令定义对象提供钩子函数 bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inSerted被绑定元素插入父节点时调用仅保证父节点存在但不一定已被插入文档中。 update所在组件的VNode更新时调用但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。 ComponentUpdate指令所在组件的 VNode及其子VNode全部更新后调用。 unbind只调用一次指令与元素解绑时调用。
钩子函数参数 el绑定元素 bing 指令核心对象描述指令全部信息属性 name value oldValue expression arg modifers vnode 虚拟节点 oldVnode上一个虚拟节点更新钩子函数中才有用
2使用场景
普通DOM元素进行底层操作的时候可以使用自定义指令 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展不仅可用于定义任何的DOM操作并且是可复用的。
3使用案例
初级应用 鼠标聚焦 下拉菜单 相对时间转换 滚动动画 高级应用 自定义指令实现图片懒加载 自定义指令集成第三方插件
