Vue3의 지시문 기능: 사용자 정의 명령이 Vue3 기능을 확장합니다.-View.js-php.cn

Vue3의 지시문 기능: 사용자 정의 명령이 Vue3 기능을 확장합니다.

王林

풀어 주다： 2023-06-18 17:40:37

원래의

3349명이 탐색했습니다.

Vue3는 Vue2에 비해 여러 측면에서 업그레이드 및 개선된 최신 버전입니다. 지시문 함수는 Vue3의 새로운 기능으로 Vue3의 기능을 확장하기 위해 명령을 사용자 정의하는 데 사용할 수 있습니다.

명령이란 무엇인가요?

지시문은 Vue에서 제공하는 특수 구성요소 속성으로, 템플릿에 특정 동작을 추가하는 데 사용됩니다. 지시문은 요소에 대해 작동하여 모양이나 동작을 변경하는 AngularJS의 일반적인 지시문으로 생각할 수 있습니다. 예를 들어 Vue에서 흔히 사용되는 v-if, v-for, v-bind 등은 모두 명령어입니다.

Vue3의 지시어는 함수 기반입니다. 이는 함수를 사용하여 사용자 지정 지침을 만들 수 있음을 의미합니다. 이러한 지시문 함수는 애플리케이션이 초기화되기 전에 Vue와 결합되어야 하며 요소, 구성 요소 또는 기타 DOM 노드에서 사용할 수 있습니다.

명령 함수의 구문 형식은 다음과 같습니다.

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  },
  mounted(el, binding, vnode) {
    // ...
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // ...
  },
  updated(el, binding, vnode, prevVnode) {
    // ...
  },
  beforeUnmount(el, binding, vnode) {
    // ...
  },
  unmounted(el, binding, vnode) {
    // ...
  }
}

로그인 후 복사

명령 함수는 개체를 생성하여 정의됩니다. 이 개체에는 마운트, 업데이트 및 마운트 해제 중 명령의 다양한 단계를 나타내는 6가지 메서드가 있습니다. 각 메소드에는 요소, 바인딩 개체 및 가상 노드라는 세 가지 매개 변수가 있습니다.

위 코드에서 각 함수에는 세 개의 매개변수가 있음을 알 수 있습니다.

el(HTMLElement): 명령어가 바인딩되는 요소입니다. (예: v-myDirective 지시문을 사용하는 경우 el은 지시문이 바인딩되는 요소입니다.)
binding(DirectiveBinding): 지시문 정보를 포함하는 개체입니다. (예: 명령의 이름, 값, 매개변수 등을 포함합니다.)
vnode(VNode): Vue가 생성한 가상 노드입니다. (예: v-myDirective 지시어를 사용하는 경우 vnode는 지시어가 포함된 구성 요소 또는 요소의 가상 노드입니다.)

다음으로 사용자 정의 지시어를 생성하는 방법을 살펴보겠습니다.

사용자 지정 지시문 만들기

사용자 지정 지시문을 만들려면 Vue에서 제공하는 지시문 함수를 사용해야 합니다.

import { Directive } from 'vue'

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  }
}

Vue.directive('my-directive', myDirective)

로그인 후 복사

이 예에서는 지시문 함수를 사용하여 my-directive라는 지시문을 만듭니다. 사용자 정의 지시어를 지정하고 지시어 정의를 함수에 전달합니다. 이 예에서는 beforeMount 후크만 정의했는데, 이는 Vue 인스턴스의 마운트 프로세스 중에 이 명령 함수가 호출된다는 의미입니다. 필요에 따라 후크 기능을 선택할 수 있습니다. my-directive的自定义指令，并将指令的定义传递给该函数。在这个例子中，我们只定义了beforeMount钩子，这意味着在Vue实例的挂载过程中，这个指令函数将被调用。你可以根据自己的需求选择钩子函数。

使用自定义指令

一旦我们已经定义了一个自定义指令，我们就可以在Vue模板中使用它。我们可以使用特定的HTML属性来绑定指令，在Vue中这些属性以v-前缀开头。例如：

<div v-my-directive>这是一个自定义指令</div>

로그인 후 복사

在这个例子中，我们使用v-my-directive将我们的自定义指令绑定到了一个<div>元素上。在Vue实例挂载该元素时，beforeMount

사용자 정의 지시어 사용

사용자 정의 지시어를 정의한 후에는 Vue 템플릿에서 이를 사용할 수 있습니다. Vue에서 v- 접두사로 시작하는 특정 HTML 속성을 사용하여 지침을 바인딩할 수 있습니다. 예:

rrreee

이 예에서는 v-my-directive를 사용하여 사용자 정의 지시문을 <div> 요소에 바인딩합니다. Vue 인스턴스가 요소를 마운트하면 beforeMount 후크가 호출됩니다.

Summary

Vue3에서는 디렉티브 함수를 이용하여 커스텀 디렉티브를 생성할 수 있는 함수 기반 API가 되었습니다. 사용자 정의 지시어는 요소, 구성 요소 또는 기타 DOM 노드에서 Vue의 기능을 확장하는 데 사용할 수 있습니다. 🎜🎜명령 함수에는 6개의 수명 주기 후크가 있으며, 이는 다양한 명령 상태에 매핑됩니다. 개발자는 적절한 후크 기능을 사용하여 특정 단계에서 작업을 수행하도록 선택할 수 있습니다. 🎜🎜지시문의 주요 목적은 DOM 작업 및 대화형 동작을 구현하는 것이지만 사용자 지정 지시문을 사용하면 개발자는 특정 특정 동작을 지시문에 쉽게 캡슐화한 다음 템플릿에서 지시문을 호출하여 이러한 동작을 구현할 수 있으므로 코드를 더욱 간결하게 만들 수 있습니다. , 유지 관리 및 확장이 더 쉽습니다. 🎜

위 내용은 Vue3의 지시문 기능: 사용자 정의 명령이 Vue3 기능을 확장합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!