Vue.javascript源码分析(二十四)高级应用自定义指令详解

初夏的脚步刚刚走来,人们纷纷把厚重的单衣脱掉,换上了凉爽的短袖,又把旅游鞋换成了颜色各不相同的夹鞋,有淡绿色的;有洁白的;还有深蓝色的……

除了核心功能默认内置的指令 (v-modelv-show),Vue 也允许注册自定义指令。

官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染、插入到父节点、更新、解绑时可以执行一些特定的操作(钩子函数()

自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局部自定义指令只能在当前Vue实例内使用

自定义指令可以绑定如下钩子函数:

·bind        ;只调用一次,元素渲染成DOM节点后,执行directives模块的初始化工作时调用,在这里可以进行一次性的初始化设置。 ·inserted        ;被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 ·update        ;所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。 ·componentUpdated  ;指令所在组件的 VNode 及其子 VNode 全部更新后调用。 ·unbind        ;只调用一次,指令与元素解绑时调用。

每个钩子函数可以有四个参数,分别是el(对应的DOM节点引用)、binding(一些关于指令的扩展信息,是个对象)、vnode(该节点对应的虚拟VN哦的)和oldVnode(之前的VNode,仅在update和componentUpdated钩子中可用)

bind钩子函数执行的时候该DOM元素被渲染出来了,但是并没有插入到父元素中,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="d"><input type="" name="" v-focus></div>
    <script>
        Vue.directive('focus', {       
            bind:function(el){console.log(el.parentElement);},                      //打印父节点
            inserted: function (el) {console.log(el.parentElement);el.focus()}      //打印父节点,并将当前元素处于聚焦状态
        })
        var app = new Vue({el:"#d"})
    </script>
</body>
</html>

到此这篇关于Vue.javascript源码分析(二十四)高级应用自定义指令详解就介绍到这了。人只有将寂寞坐断,才可以重拾喧闹;把悲伤过尽,才可以重见欢颜;把苦涩尝遍,就会自然回甘。信了这些,就可以更坦然地面对人生沟壑,走过四季风霜。言者随意,但生命毕竟是一个漫长的过程,每一寸时光都要自己亲历,每一杯雨露都要自己亲尝。更多相关Vue.javascript源码分析(二十四)高级应用自定义指令详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明