vue의 사용자 정의 지시문은 무엇입니까? 사용하는 방법?

이 글에서는 vue의 사용자 정의 명령어를 안내하고 사용자 정의 명령어, 사용자 정의 명령어 매개변수 및 사용자 정의 명령어 사용 시나리오를 등록하는 방법을 소개합니다.

이제 Vue는 국내 프론트엔드 시장의 대부분을 차지하고 있습니다. 프론트엔드 구직 과정에서 Vue 관련 면접 질문이 점점 더 많아지고 있습니다. Vue가 그토록 인기를 끄는 가장 큰 이유는 Vue의 진보적이고 구성 요소화되었으며 필수적이고 기타 아이디어를 통해 일반 개발자가 시작하기가 매우 쉽기 때문입니다. [관련 권장 사항: vuejs 비디오 튜토리얼]

명령은 Vue 프로젝트에서 가장 많이 사용되는 것 중 하나입니다. 오늘은 Vue 지침의 한 분야인 사용자 정의 지침을 설명하겠습니다.

1. 맞춤 지시란 무엇인가요?

맞춤 명령어를 사용하려면 먼저 맞춤 명령어가 무엇인지 이해해야 합니까?

사용자 정의 명령어는 이해하기 매우 쉽습니다. 우리가 사용하는 v-for, v-if, v-model 등을 명령어라고 하며 Vue의 내장 명령어라고도 합니다. 이 지침은 우리가 직접 사용할 수 있는 전부입니다.

개발자의 요구 사항을 더 잘 충족하고 맞춤형 개발을 극대화하기 위해 Vue는 사용자 정의 지침 API를 제공하므로 내장 지침을 사용하는 것 외에도 지침을 정의한 후 자체 지침을 정의할 수도 있습니다. , 내장된 명령어는 매우 유사한 방식으로 작동합니다.

예를 들어 우리가 보고 있는 코드는

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

위 코드에서 v-pin이 무엇인지 모르는 친구들이 많을 것인데, 혹시 명령어를 접해본 적 있으신가요? 사실 v-pin은 커스텀 명령어인데 여기서는 이를 등록하는 코드를 생략했습니다.

2. 환경 준비

방의 경우 Vue2.x의 스캐폴딩 도구를 직접 사용하여 프로젝트를 빠르게 빌드합니다.

빌드 명령:

vue create 项目名称

실행:

3. 사용자 정의 명령을 등록하는 방법은 무엇입니까?

사용자 정의 명령을 사용하려면 먼저 사전 등록을 해야 합니다. 구성 요소와 마찬가지로 먼저 등록해야 사용할 수 있습니다.

등록 지침도 글로벌 등록과 로컬 등록으로 나누어지는데, 이는 글로벌 등록 구성 요소와 로컬 등록 구성 요소와 동일합니다. 전역적으로 등록된 명령어는 모든 구성 요소에서 직접 사용할 수 있는 반면, 로컬로 등록된 명령어는 등록된 위치에서만 사용할 수 있습니다.

3.1 전역 등록

전역 등록은 이름에서 알 수 있듯이 사용자 지정 지침을 등록한 후 프로젝트의 모든 구성 요소에서 직접 사용할 수 있습니다.

Vue는 사용자 정의 명령어를 등록하는 지시문 방법을 제공합니다. 우리는 main.js에 전역 사용자 정의 명령어를 등록합니다.

코드는 다음과 같습니다.

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

위 코드에서는 Vue에서 제공하는 디렉티브 메소드를 직접 호출하여 전역 사용자 정의 디렉티브를 등록했습니다. 이 메소드는 디렉티브 이름과 디렉티브 후크가 포함된 객체라는 두 가지 매개변수를 받습니다. 기능.

명령이 등록된 후에는 프로젝트의 모든 구성 요소에 있는 요소에 "v-command name" 형식으로 명령을 사용할 수 있습니다.

명령 후크 기능은 Vue의 수명 주기 후크 기능과 비교할 수 있습니다. 해당 기능은 명령이 다른 프로세스에서 다른 작업을 수행할 수 있도록 하는 것입니다.

3.2 부분 등록

일반적으로 모든 구성 요소에서 사용자 지정 명령어를 사용하지 않는 경우 일반적으로 사용자 지정 명령어만 등록합니다.

APP.vue 파일을 변환하고 그 안에 사용자 정의 명령어를 등록해 보겠습니다. 코드는 다음과 같습니다.

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

위에서 볼 수 있듯이 Vue는 사용자 정의 명령어를 등록할 수 있는 명령어 옵션을 제공합니다. 코드에서는 resize라는 사용자 지정 지시문을 등록했는데, 이는 구성 요소 내부에서만 사용할 수 있습니다.

참고: 전역 등록 지침은 지시문을 사용하고, 로컬 등록 지침은 지시문을 사용하여 한 번에 많은 로컬 명령어를 등록하는 것이 이해하기 쉽지만 순차적으로 하나의 전역 명령어만 등록할 수 있습니다.

4. 사용자 정의 명령어 매개변수에 대한 자세한 설명

이전 섹션에서는 명령어에 여러 가지 후크 기능이 있다는 것을 간략하게 소개했습니다. 후크 기능을 소개하려면 이러한 후크 기능을 소개하는 것이 필요합니다.

4.1 후크 기능 소개

bind:

은 명령어가 처음으로 요소에 바인딩될 때 한 번만 호출됩니다. 여기에서 일회성 초기화 설정을 수행할 수 있습니다.

inserted:

은 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드만 존재하도록 보장되지만 반드시 문서에 삽입될 필요는 없습니다).

업데이트:

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

위 내용은 vue의 사용자 정의 지시문은 무엇입니까? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!