Qu'est-ce qu'une directive personnalisée dans vue ? Comment utiliser ?

Cet article vous présentera les instructions personnalisées dans vue et vous présentera comment enregistrer des instructions personnalisées, des paramètres d'instructions personnalisées et des scénarios d'utilisation d'instructions personnalisées. J'espère qu'il sera utile à tout le monde !

Maintenant, Vue occupe la majorité du marché frontal national. Au cours du processus de recherche d'emploi frontal, il y a de plus en plus de questions d'entretien liées à Vue. Une grande partie de la raison pour laquelle Vue est si populaire est que ses idées progressives, composées de composants, impératives et autres permettent aux développeurs ordinaires de démarrer très facilement. [Recommandations associées : Tutoriel vidéo Vuejs]

Les instructions sont l'une des choses les plus utilisées dans un projet Vue. Aujourd'hui, nous allons expliquer une branche des instructions Vue : les instructions personnalisées.

1. Qu'est-ce qu'une instruction personnalisée ?

Si nous voulons utiliser des instructions personnalisées, nous devons d'abord comprendre ce qu'est une instruction personnalisée ?

Les instructions personnalisées sont très faciles à comprendre. Les v-for, v-if, v-model, etc. que nous utilisons sont appelés instructions, et ils sont également appelés instructions intégrées de Vue. Ces instructions sont tout ce que nous pouvons utiliser directement.

Afin de mieux répondre aux besoins et de maximiser le développement personnalisé des développeurs, Vue nous expose l'API d'instructions personnalisées, afin qu'en plus d'utiliser les instructions intégrées, nous puissions également définir nos propres instructions après les avoir définies. , Les instructions intégrées fonctionnent de manière très similaire.

Par exemple, le code que nous examinons :

<p v-pin="200">我是一段话</p>

Dans le code ci-dessus, de nombreux amis ne savent peut-être pas ce qu'est le v-pin. Cela ressemble à une commande, mais l'avez-vous déjà rencontré ? En fait, v-pin est une instruction personnalisée, mais nous omettons le code pour l'enregistrer ici.

2. Préparation de l'environnement

Pour la salle, nous utilisons directement l'outil d'échafaudage de Vue2.x pour construire rapidement un projet.

Commande de construction :

vue create 项目名称

Exécutez-la :

3. Comment enregistrer une commande personnalisée ?

Pour utiliser une commande personnalisée, nous devons d'abord l'enregistrer au préalable, tout comme nos composants, ils doivent être enregistrés avant de pouvoir être utilisés.

Les instructions d'enregistrement sont également divisées en enregistrement global et enregistrement local, qui sont les mêmes que les composants d'enregistrement global et les composants d'enregistrement local. Les instructions enregistrées globalement peuvent être utilisées directement dans n'importe quel composant, tandis que les instructions enregistrées localement ne peuvent être utilisées que là où elles sont enregistrées.

3.1 Enregistrement global

Enregistrement global, comme son nom l'indique, une fois les instructions personnalisées enregistrées, elles peuvent être utilisées directement dans toutes les composantes du projet.

Vue fournit une méthode directive nous permettant d'enregistrer des instructions personnalisées. Nous enregistrons une instruction personnalisée globale dans main.js.

Le code est le suivant :

// src/main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
Vue.directive("resize", {
  bind() {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {},
});
new Vue({
  render: (h) => h(App),
}).$mount("#app");

Dans le code ci-dessus, nous avons directement appelé la méthode de directive fournie par Vue pour enregistrer la directive personnalisée globale. Cette méthode reçoit deux paramètres : le nom de la directive et l'objet contenant le hook de directive. fonction.

Une fois la commande enregistrée, nous pouvons utiliser la commande sous la forme de "nom de la commande v" sur les éléments de n'importe quel composant du projet.

Il convient de noter que la fonction hook d'instruction n'est pas nécessaire. Vous pouvez la comparer avec la fonction hook de cycle de vie de vue. Leur fonction est de permettre aux instructions de faire différentes choses dans différents processus.

3.2 Enregistrement partiel

De manière générale, si l'instruction personnalisée n'est pas utilisée par tous les composants, nous enregistrons généralement simplement l'instruction personnalisée.

Transformons le fichier APP.vue et enregistrons les instructions personnalisées à l'intérieur. Le code est le suivant :

<script>
export default {
  name: "App",
  components: {},
  directives: {
    resize: {
      bind() {},
      inserted() {},
      update() {},
      componentUpdated() {},
      unbind() {},
    },
  },
};
</script>

Comme indiqué ci-dessus, Vue fournit une option de directives pour nous permettre d'enregistrer des instructions personnalisées. Elle est au même niveau que les données et. méthodes, comme indiqué dans le paragraphe précédent. Dans le code, nous avons enregistré une directive personnalisée nommée resize, qui ne peut être utilisée qu'à l'intérieur du composant.

Remarque : les instructions d'enregistrement globales utilisent des directives et les instructions d'enregistrement locales utilisent des directives. Il est facile à comprendre d'enregistrer plusieurs instructions locales en même temps, mais une seule instruction globale peut être enregistrée dans l'ordre.

4. Explication détaillée des paramètres d'instruction personnalisée

La section précédente a brièvement présenté les instructions personnalisées d'enregistrement local et les instructions personnalisées d'enregistrement globales. Vous pouvez voir qu'il existe plusieurs fonctions de crochet dans les instructions. Notre logique de fonctionnement se trouve principalement dans ces quelques-unes. les fonctions hook, il nous faut introduire ces fonctions hook.

4.1 Introduction à la fonction hook

bind :

n'est appelée qu'une seule fois, lorsque l'instruction est liée à l'élément pour la première fois. Les paramètres d'initialisation uniques peuvent être effectués ici.

inséré :

est appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).

mise à jour :

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：

指令所在组件的 VNode及其子 VNode全部更新后调用。

unbind：

只调用一次，指令与元素解绑时调用。

上面5个就是自定义指令的全部钩子函数，每个钩子函数都是可选的，视情况而定。大家可以简单理解钩子函数顺序：指令绑定到元素时（bind）、元素插入时（inserted）、组件更新时（update）、组件更新后（componentUpdated）、指令与元素解绑时（unbind）。这些和组件的生命周期函数有点类似。

4.2 钩子函数参数介绍

为了方便我们的逻辑操作，每个钩子函数都会接收参数，我们可以用这些参数做我们想做的事。

el：

指令所绑定的元素，可以用来直接操作 DOM。

binding：

一个对象，包含以下属性：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：

Vue 编译生成的虚拟节点。

oldVnode：

上一个虚拟节点，仅在update和componentUpdated钩子中可用。

在使用的时候，el和binding参数是我们使用得最平凡的，有了这些参数，我们的操作就变得简单起来。

5. 简单案列实战

上面两节介绍了如何注册自定义指令以及相关参数，接下来就该实战了，我们在APPVue中定义一个自定义指令，先来验证一下钩子函数的执行情况。

代码如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div v-resize></div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  directives: {
    resize: {
      bind() {
        console.log("bind")
      },
      inserted() {
        console.log("inserted")
      },
      update() {
        console.log("update")
      },
      componentUpdated() {
        console.log("componentUpdated")
      },
      unbind() {
        console.log("unbind")
      },
    },
  },
};
</script>

效果如下：

上面代码中我们将自定义指令resize绑定到了div元素上面，当我们刷新页面时，执行了自定义指令中的bind和inserted钩子函数，其余函数均要元素有更新才会执行。

5.1 实现v-resize指令

需求背景：

在做数据大屏或者自适应开发的时候，我们通常需要根据浏览器窗口大小的变化重新渲染页面，比如重新绘制echarts图表等功能。

需求描述：

实现自定义指令v-resize指令，窗口大小发生变化时，实时打印最新的窗口宽高。

代码实现：

// src/APP.vue
<template>
  <div id="app">
    <h1>窗口宽度：{{ innerWidth }}</h1>
    <h1>窗口高度：{{ innerHeight }}</h1>
    <div style="height: 300px; width: 80%; background: blue" v-resize></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      innerHeight: window.innerHeight,
      innerWidth: window.innerWidth,
    };
  },
  components: {},
  directives: {
    resize: {
      bind() {
        console.log("bind");
      },
      inserted(el, binding, vnode) {
        console.log("inserted");
        console.log(el, binding);
        let that = vnode.context;
        // 监听浏览器的resize事件
        window.addEventListener("resize", () => {
          that.innerHeight = window.innerHeight;
          that.innerWidth = window.innerWidth;
        });
      },
      update() {
        console.log("VNode更新了");
      },
      componentUpdated() {
        console.log("componentUpdated");
      },
      unbind() {
        console.log("unbind");
        window.removeEventListener("resize");
      },
    },
  },
};
</script>

效果如下：

当我们更改浏览器窗口大小时，页面上会实时打印出最新的高度和宽度，当然这儿只是一个最简单的案例，实际项目中我们通常会在窗口大小发生变化后去调用自定义的一些方法。

5.2 指令传参和传值

我们使用v-bind、v-model等内置指令时，都是可以传参和传值的，我们自定义指令也一样。

示例代码：

<template>
  <div id="app">
    <h1>窗口宽度：{{ innerWidth }}</h1>
    <h1>窗口高度：{{ innerHeight }}</h1>
    <div
      style="height: 300px; width: 80%; background: blue"
      v-resize:[args]="value"
    ></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      innerHeight: window.innerHeight,
      innerWidth: window.innerWidth,
      args: "我是参数",
      value: "我是传的值",
    };
  },
  components: {},
  directives: {
    resize: {
      bind(el, binding) {
        console.log("bind");
        console.log("值", binding.value);
        console.log("参数", binding.arg);
      },
    },
  },
};
</script>

效果如下：

args和value就是我们传给指令的参数和值，需要注意的是value接收变量或者表达式，arg接收字符串或者变量，具体解释可以参上参数详解那一节。

5.3 指令简写

很多时候我们不需要用到自定义指令中的所有钩子函数，常用的就那么几个，所以官方给我们提供了一种简写的方式。

代码如下：

resize(el, binding) {
   console.log("我是简写的自定义指令", binding.value);
},

上面代码的写法让我们的指令变得很简洁，上段代码的意思就是把bind和update钩子函数合二为一了，通常我们想要这两个钩子函数做同样的事的时候使用。

6. 自定义指令使用场景

知道了自定义指令如何使用，我们可以扩充一下使用场景，加深一下大家对自定义指令的理解。

6.1 v-copy

实现一键复制文本内容，用于鼠标右键粘贴。

6.2 v-longpress

实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件。

6.3 v-debounce

防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

6.4 v-LazyLoad

实现一个图片懒加载指令，只加载浏览器可见区域的图片。

6.5 v-draggable

实现一个拖拽指令，可在页面可视区域任意拖拽元素。

上面的一些自定义指令都是需求中非常常见的，对应的指令代码网上也有很多，但是我建议大家自己下去实践一下。

总结

自定义指令的语法规则和用法很简单，复杂的是我们要用来解决什么问题。在合适的场景下使用合适的解决办法才是最重要的。

（学习视频分享：vuejs教程、web前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!