除了核心功能默认内置的指令 (v-model 和 v-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源码分析(二十四)高级应用自定义指令详解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
