En savoir plus sur les directives personnalisées dans Vue-Voir.js-php.cn

En savoir plus sur les directives personnalisées dans Vue

Préparation : Introduction aux directives personnalisées

En plus des directives intégrées par défaut des fonctions principales (v-model et v-show , etc.), Vue permet également d'enregistrer des directives personnalisées. Notez que dans Vue2.0, la principale forme de réutilisation et d'abstraction de code concerne les composants. Cependant, dans certains cas, vous devez toujours effectuer des opérations de bas niveau sur des éléments DOM ordinaires, auquel cas des directives personnalisées sont utilisées. [Partage de vidéos d'apprentissage : vue vidéo tutoriel, web front-end vidéo]v-model 和 v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。【学习视频分享：vue视频教程、web前端视频】

作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、v-for、v-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼~

对于Vue的自定义指令相信很多同学已经有所了解，自定义指令的具体写法这里就不细讲了，官方文档很详细。但是不知道各位同学有没有这种感觉，就是这个技术感觉很方便，也不难，我也感觉学会了，就是不知道如何去应用。这篇文档就是为了解决一些同学的这些问题才写出来的。

PS：这次要讲的自定义指令我们主要使用的是vue2.x的写法，不过vue3.x不过是几个钩子函数有所改变，只要理解每个钩子函数的含义，两者的用法差别并不大。

试炼：实现v-mymodel

我的上篇文章说到要自己实现一个v-model指令，这里使用v-myodel模拟一个简易版的，顺便再领不熟悉的同学熟悉一下自定义指令的步骤和注意事项。

定义指令

首先梳理思路：原生input控件与组件的实现方式需要区分，input的实现较为简单，我们先实现一下input的处理。首先我们先定义一个不做任何操作的指令

Vue.directive(&#39;mymodel&#39;, {
        //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        bind(el, binding, vnode, oldVnode) {
        },
        //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中),需要父节点dom时使用这个钩子
        inserted(el, binding, vnode, oldVnode) {
        },
        //所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
        update(el, binding, vnode, oldVnode) {
        },
        //指令所在组件的 VNode **及其子 VNode** 全部更新后调用。
        componentUpdated(el, binding, vnode, oldVnode) {
        },
        只调用一次，指令与元素解绑时调用。
        unbind(el, binding, vnode, oldVnode) {
        },
})

Copier après la connexion

上面的注释中详细的说明了各个钩子函数的调用时机，因为我们是给组件上添加input事件和value绑定，因此我们在bind这个钩子函数中定义即可。所以我们把其他的先去掉，代码变成这样。

Vue.directive(&#39;mymodel&#39;, {
        //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        bind(el, binding, vnode, oldVnode) { 
        }
})

Copier après la connexion

简单说一下bind函数的几个回调参数，el是指令绑定组件对应的dom，binding是我们的指令本身，包含name、value、expression、arg等,vnode就是当前绑定组件对应的vnode结点，oldVnode就是vnode更新前的状态。

接下来我们要做两件事：

绑定input事件，同步input的value值到外部
value值绑定，监听value的变化，更新到input的value

这对于input原生组件比较容易实现：

//第一步，添加inout事件监听
el.addEventListener(&#39;input&#39;, (e) => {
   //context是input所在的父组件，这一步是同步数据
   vnode.context[binding.expression] = e.target.value;
})
//监听绑定的变量
vnode.context.$watch(binding.expression, (v) => {
     el.value = v;
})

Copier après la connexion

这里解释一下上面的代码，vnode.context是什么呢，他就是我们指令所在组件的上下文环境，可以理解就是指令绑定的值所在的组件实例。不熟悉vnode结构的同学建议先看一下官方的文档，不过文档描述的比较简单，不是很全面，所以最好在控制台log一下vnode的对象看一下它具体的结构，这很有助于我们封装自定义指令，对理解Vue原理也很有帮助。

我们可以通过context[binding.expression]获取v-model上到绑定的值，同样可以修改它。上面的代码中我们首先通过在添加的input事件中操作vnode.context[binding.expression] = e.target.value同步input的value值到外部（context），与使用@input添加事件监听效果是一样的；然后我们需要做第二件事，做value值的绑定，监听value的变化，同步值的变更到input的value上，我们想到我们可以使用Vue实例上的额$watch方法监听值的变化，而context就是那个Vue实例，binding.expression

car les développeurs qui utilisent Vue doivent être familiers avec les instructions Vue, telles que v-model, v-on</ code> , <code>v-for, v-if, etc. Dans le même temps, Vue fournit également aux développeurs une API pour les instructions personnalisées. Une utilisation compétente des instructions personnalisées peut grandement. améliorer L'efficacité de notre écriture de code nous permet de gagner du temps et de pêcher joyeusement~🎜🎜Pour Vue< Je pense que de nombreux étudiants connaissent déjà les instructions personnalisées de /a>. Je n'entrerai pas ici dans les détails sur la façon d'écrire des instructions personnalisées. La documentation officielle est très détaillée. Mais je ne sais pas si vous, les étudiants, ressentez cela. Cette technologie semble très pratique et pas difficile. J'ai aussi l'impression de l'avoir apprise, mais je ne sais tout simplement pas comment l'appliquer. Ce document a été rédigé pour résoudre ces problèmes de certains étudiants. 🎜🎜PS : Les instructions personnalisées dont nous allons parler cette fois utilisent principalement la méthode d'écriture de vue2.x, mais vue3.x n'en est que quelques-unes. fonctions hook Il y a des changements, tant que vous comprenez la signification de chaque fonction hook, il n'y a pas beaucoup de différence d'utilisation entre les deux. 🎜

🎜Essai : Implémenter v-mymodel🎜🎜🎜Mon dernier article mentionnait que je devais implémenter moi-même une instruction `v-model`, ici, nous utilisons `v-myodel` pour simuler une version simple. En passant, nous familiariserons les étudiants non familiers avec les étapes et les précautions des instructions personnalisées. 🎜

🎜Instructions de définition🎜

🎜Il faut d'abord trier les idées : il faut distinguer les méthodes d'implémentation des contrôles et composants input natifs, < code>input est relativement simple. Implémentons d'abord le traitement de input. Tout d'abord, nous définissons d'abord une instruction qui n'effectue aucune opération🎜

<input v-mymodel=&#39;message&#39;/>

En savoir plus sur les directives personnalisées dans Vue

Préparation : Introduction aux directives personnalisées

试炼：实现v-mymodel

定义指令

🎜Instructions de définition🎜

应用实践：4个实用的自定义指令

权限控制

输入限制

内容处理

文件预览

试着自己实现

总结