Apakah arahan tersuai dalam vue? Bagaimana untuk menggunakan

Artikel ini akan membawa anda melalui arahan tersuai dalam vue dan memperkenalkan cara mendaftar arahan tersuai, parameter arahan tersuai dan senario penggunaan arahan tersuai saya harap ia akan membantu semua orang.

Vue kini menduduki sebahagian besar pasaran hadapan domestik Semasa proses pencarian pekerjaan bahagian hadapan, terdapat lebih banyak soalan temuduga berkaitan Vue. Sebahagian besar sebab mengapa Vue begitu popular ialah ideanya yang progresif, berkomponen, penting dan lain-lain menjadikannya sangat mudah untuk pembangun biasa untuk bermula. [Cadangan berkaitan: tutorial video vuejs] Arahan

ialah salah satu perkara yang paling banyak digunakan dalam projek Vue Hari ini kami akan menerangkan satu cabang arahan Vue: arahan tersuai.

1. Apakah arahan tersuai?

Untuk menggunakan arahan tersuai, pertama sekali kita perlu memahami apakah arahan tersuai?

Arahan tersuai sangat mudah difahami Model v-for, v-if, v-dsb. yang kami gunakan dipanggil arahan, dan ia juga dipanggil arahan terbina dalam Vue. Arahan ini sahaja yang boleh kita gunakan secara langsung.

Untuk memenuhi keperluan dengan lebih baik dan memaksimumkan pembangunan diperibadikan pembangun, Vue mendedahkan API arahan tersuai kepada kami, supaya selain menggunakan arahan terbina dalam, kami juga boleh menentukan arahan kami sendiri . Setelah ditakrifkan, ia sangat serupa dengan arahan terbina dalam.

Contohnya, kod yang kita lihat:

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

Dalam kod di atas, ramai rakan mungkin tidak tahu apa itu v-pin Ia kelihatan seperti arahan, tetapi ada anda menemuinya? Sebenarnya, v-pin ialah arahan tersuai, tetapi kami meninggalkan kod untuk mendaftarkannya di sini.

2. Persediaan persekitaran

Untuk bilik, kami terus menggunakan alat perancah Vue2.x untuk membina projek dengan cepat.

Bina arahan:

vue create 项目名称

Jalankannya:

3. Bagaimana untuk mendaftar arahan tersuai?

Untuk menggunakan arahan tersuai, kita mesti mendaftarkannya terlebih dahulu, sama seperti komponen kita, ia mesti didaftarkan sebelum ia boleh digunakan.

Arahan pendaftaran juga dibahagikan kepada pendaftaran global dan pendaftaran tempatan, yang sama seperti komponen pendaftaran global dan komponen pendaftaran tempatan. Arahan yang didaftarkan secara global boleh digunakan secara langsung dalam mana-mana komponen, manakala arahan yang didaftarkan secara tempatan hanya boleh digunakan di mana ia didaftarkan.

3.1 Pendaftaran Global

Pendaftaran global, seperti namanya, selepas arahan tersuai didaftarkan, ia boleh digunakan terus dalam semua komponen daripada projek itu.

Vue menyediakan kaedah arahan untuk kami mendaftarkan arahan tersuai Kami mendaftarkan arahan tersuai global dalam main.js.

Kodnya adalah seperti berikut:

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

Dalam kod di atas, kami terus memanggil kaedah arahan yang disediakan oleh Vue untuk mendaftarkan arahan tersuai global Kaedah ini menerima dua Parameter: Nama arahan, objek yang mengandungi fungsi cangkuk arahan.

Selepas arahan didaftarkan, kita boleh menggunakan arahan dalam bentuk "v-command name" pada elemen dalam mana-mana komponen dalam projek.

Perlu diambil perhatian bahawa fungsi cangkuk arahan tidak diperlukan Anda boleh membandingkannya dengan fungsi cangkuk kitaran hayat vue Fungsi mereka adalah untuk membenarkan arahan melakukan perkara yang berbeza dalam proses yang berbeza.

3.2 Pendaftaran separa

Secara amnya, jika arahan tersuai tidak digunakan oleh setiap komponen, kami biasanya mendaftarkan arahan Hanya yang tersuai.

Mari ubah fail APP.vue dan daftarkan arahan tersuai di dalamnya. Kodnya adalah seperti berikut:

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

Seperti yang ditunjukkan di atas, Vue menyediakan pilihan arahan untuk kami mendaftar arahan tersuai. . , yang berada pada tahap yang sama dengan data dan kaedah Dalam kod di atas, kami mendaftarkan arahan tersuai yang dipanggil ubah saiz, yang hanya dibenarkan untuk digunakan di dalam komponen.

Nota: Arahan pendaftaran global menggunakan arahan, dan arahan pendaftaran tempatan menggunakan arahan. Beri perhatian kepada mendaftarkan banyak arahan tempatan pada satu masa, dan hanya satu arahan global boleh didaftarkan urutan.

4. Penjelasan terperinci tentang parameter arahan tersuai

Bahagian sebelumnya secara ringkas memperkenalkan arahan tersuai pendaftaran tempatan dan arahan tersuai pendaftaran global Anda boleh melihat bahawa terdapat beberapa fungsi cangkuk dalam arahan . , logik operasi kami terutamanya dalam fungsi cangkuk ini, jadi adalah perlu untuk kami memperkenalkan fungsi cangkuk ini.

4.1 Pengenalan kepada fungsi cangkuk

bind:

Hanya dipanggil sekali, arahan Dipanggil kali pertama ia terikat pada elemen. Tetapan permulaan sekali boleh dilakukan di sini.

dimasukkan:

Dipanggil apabila elemen terikat dimasukkan ke dalam nod induk (hanya dijamin bahawa nod induk wujud, tetapi tidak semestinya mempunyai telah dimasukkan ke dalam dokumen).

kemas kini:

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

Atas ialah kandungan terperinci Apakah arahan tersuai dalam vue? Bagaimana untuk menggunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!