局部钩子能防全局钩子吗_Vue自定义全局指令和局部指令

大家好，我是羊歌，欢迎收看《羊歌编程笔记》。

在上个vue的视频课程里，我和大家分享了《自定义指令》的定义及作用，今天我要和大家分享的内容呢，是接着上集视频的内容，主要和大家讲解一下，自定义指令实操部分。让大家对自定义的指令中全局注册指令和局部注册指令有一个更深入的了解。

(图一)自定义指令实操

本次内容要展示的内容：是用Vue自定义全局指令和局部指令这两种方案，来实现输入框自动获取焦点。效果图如下：

(图二)输入框自动获取焦点

下面我们用自定义全局指令来实现输入框自动获取焦点这样的功能。

在这里呢，我们新建了一个VUE自定义指令的项目项目下面的文件分别是自定义全局指令文件qjzl.html文件，一个是qjzl.js文件还有一个是vue.js文件。

下面2张图是自定义全局指令代码文件，vue.js文件大家自行下载即可。

(图三)自定义全局指令HTML界面

(图四)自定义全局指令JS界面

我们先来看qjzl的js文件。大家看这里的foces是我自定义的一个指令ID，我用Vue.directive来进行全局注册，这里跟全局注册组件差不多，在这里的大括号里的对象，inserted: function (el)呢，表示被绑定的元素el插入到 DOM 中时，它执行了钩子函数inserted。下面的el.focus()，表示我们要聚焦的元素。

我们接着往下我们实例化了一个VUE，这里就不用说了，我们来看看qjzl的html文件。

在这里面呢，我们建了一个

，这里呢我们有一个 v-focus >大家注意这里的v-focus就是我们自定义指令。

在火狐浏览器中显示的效果就是图二所展示的效果，大家可以根据代码实际操作一下。

我们来看看局部注册指令。

我们打开jbzl.html文件。我们div里面的内容呢，基本上没有什么变化，改的是这个script标签里的内容，我们来看一下，从整体的结构上来讲的话，这个和我们的局部组件也差不多吧。这里的指令呢就的directives: 下面focus就是我们自定义指令对象。只是这里呢有个重点，我要强调一下，局部指令只能在这个实例中使用。请看图五

(图五)自定义局部指令实现输入框自动获取焦点

在浏览器的显示效果，和自定义全局注册指令效果是一样的？比较的简单啊，大家记住就行。

最后呢，欢迎大家在今晚9点来看《羊歌编程笔记》Vue自定义全局指令和局部指令实操的视频讲解。

如果有不理解的，评论区留言，羊歌呢会跟大家一起探讨！