Was ist eine benutzerdefinierte Direktive in Vue? Wie benutzt man?

Dieser Artikel führt Sie durch die benutzerdefinierten Anweisungen in vue und stellt vor, wie Sie benutzerdefinierte Anweisungen, benutzerdefinierte Befehlsparameter und benutzerdefinierte Befehlsverwendungsszenarien registrieren. Ich hoffe, dass er für alle hilfreich ist!

Mittlerweile nimmt Vue den Großteil des inländischen Front-End-Marktes ein. Während der Front-End-Jobsuche gibt es immer mehr Vue-bezogene Interviewfragen. Ein großer Teil der Beliebtheit von Vue liegt darin, dass seine progressiven, komponentenbasierten, imperativen und anderen Ideen den Einstieg für normale Entwickler sehr einfach machen. [Verwandte Empfehlungen: vuejs-Video-Tutorial]

Anweisungen gehören zu den am häufigsten verwendeten Dingen in einem Vue-Projekt. Heute erklären wir einen Zweig der Vue-Anweisungen: benutzerdefinierte Anweisungen.

1. Was ist eine benutzerdefinierte Anleitung?

Wenn wir benutzerdefinierte Anweisungen verwenden möchten, müssen wir zunächst verstehen, was eine benutzerdefinierte Anweisung ist.

Benutzerdefinierte Anweisungen sind sehr einfach zu verstehen. Die von uns verwendeten V-for-, V-if-, V-Modell-Anweisungen werden auch als integrierte Anweisungen von Vue bezeichnet. Diese Anleitungen sind alle diejenigen, die wir direkt verwenden können.

Um den Anforderungen der Entwickler besser gerecht zu werden und die personalisierte Entwicklung zu maximieren, stellt uns Vue die API benutzerdefinierter Anweisungen zur Verfügung, sodass wir zusätzlich zu den integrierten Anweisungen auch unsere eigenen Anweisungen definieren können , Integrierte Anweisungen funktionieren auf sehr ähnliche Weise.

Zum Beispiel der Code, den wir uns ansehen:

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

Im obigen Code wissen viele Freunde vielleicht nicht, was der V-Pin ist. Es sieht aus wie ein Befehl, aber sind Sie schon einmal darauf gestoßen? Tatsächlich handelt es sich bei v-pin um eine benutzerdefinierte Anweisung, aber wir lassen den Code für die Registrierung hier weg.

2. Umgebungsvorbereitung

Für den Raum verwenden wir direkt das Gerüsttool von Vue2.x, um schnell ein Projekt zu erstellen.

Build-Befehl:

vue create 项目名称

Führen Sie ihn aus:

3. Wie registriere ich einen benutzerdefinierten Befehl?

Um einen benutzerdefinierten Befehl zu verwenden, müssen wir ihn zunächst im Voraus registrieren. Genau wie unsere Komponenten müssen sie registriert werden, bevor sie verwendet werden können.

Registrierungsanweisungen sind auch in globale Registrierung und lokale Registrierung unterteilt, die mit globalen Registrierungskomponenten und lokalen Registrierungskomponenten identisch sind. Global registrierte Anweisungen können direkt in jeder Komponente verwendet werden, während lokal registrierte Anweisungen nur dort verwendet werden können, wo sie registriert sind.

3.1 Globale Registrierung

Globale Registrierung: Wie der Name schon sagt, können die benutzerdefinierten Anweisungen nach der Registrierung direkt in allen Komponenten des Projekts verwendet werden.

Vue bietet uns eine Direktivenmethode zum Registrieren benutzerdefinierter Anweisungen. Wir registrieren eine globale benutzerdefinierte Anweisung in main.js.

Der Code lautet wie folgt:

// 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");

Im obigen Code haben wir die von Vue bereitgestellte Direktivenmethode direkt aufgerufen, um die globale benutzerdefinierte Direktive zu registrieren: den Direktivennamen und das Objekt, das den Direktiven-Hook enthält Funktion.

Nachdem der Befehl registriert wurde, können wir den Befehl in Form eines „V-Befehlsnamens“ für Elemente in jeder Komponente im Projekt verwenden.

Es ist zu beachten, dass die Anweisungs-Hook-Funktion nicht erforderlich ist. Sie kann mit der Life-Cycle-Hook-Funktion von Vue verglichen werden. Ihre Funktion besteht darin, Anweisungen zu ermöglichen, unterschiedliche Dinge in verschiedenen Prozessen auszuführen.

3.2 Teilregistrierung

Wenn die benutzerdefinierte Anweisung nicht von jeder Komponente verwendet wird, registrieren wir im Allgemeinen nur die benutzerdefinierte Anweisung.

Lassen Sie uns die APP.vue-Datei umwandeln und benutzerdefinierte Anweisungen darin registrieren. Der Code lautet wie folgt:

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

Wie oben gezeigt, bietet Vue eine Direktivenoption für uns, um benutzerdefinierte Anweisungen zu registrieren Methoden, wie im vorherigen Absatz gezeigt, haben wir eine benutzerdefinierte Direktive namens resize registriert, die nur innerhalb der Komponente verwendet werden darf.

Hinweis: Globale Registrierungsanweisungen verwenden Anweisungen und lokale Registrierungsanweisungen verwenden Anweisungen. Es ist leicht zu verstehen, dass Sie darauf achten müssen, dass viele lokale Anweisungen gleichzeitig registriert werden, aber nur eine globale Anweisung kann nacheinander registriert werden.

4. Detaillierte Erläuterung der benutzerdefinierten Anweisungsparameter

Im vorherigen Abschnitt wurden die benutzerdefinierten Anweisungen zur lokalen Registrierung und die benutzerdefinierten Anweisungen zur globalen Registrierung kurz vorgestellt. Unsere Betriebslogik ist hauptsächlich in diesen Anweisungen enthalten Bei den Hook-Funktionen müssen wir diese Hook-Funktionen vorstellen.

4.1 Einführung in die Hook-Funktion

bind:

wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an das Element gebunden wird. Hier können einmalige Initialisierungseinstellungen vorgenommen werden.

eingefügt:

wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (nur die Existenz des übergeordneten Knotens ist garantiert, wird aber nicht unbedingt in das Dokument eingefügt).

Update:

所在组件的 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前端）

Das obige ist der detaillierte Inhalt vonWas ist eine benutzerdefinierte Direktive in Vue? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!