Vue에서 지침을 만드는 방법

Vue.js는 대화형 웹 애플리케이션 구축을 위한 다양한 기능을 제공하는 확장 가능한 JavaScript 프레임워크입니다. DOM 요소를 사용자 정의하고 제어하는 ​​기능 중 하나는 Vue 지시문입니다. 이 글에서는 Vue.js에서 지시어를 생성하는 방법을 소개합니다.

개요

Vue.js에서 지시문은 특수 접두사가 붙은 HTML 속성입니다. 예를 들어 "v-"는 Vue 지시문의 접두사입니다. 지시문의 값은 JavaScript 표현식이거나 지시문 이름 뒤에 콜론으로 구분된 값인 "지시문 매개변수"일 수 있습니다. 지시어는 하나 이상의 매개변수를 받을 수 있으며 수명 주기 후크를 가질 수 있습니다.

다음 예는 Vue.js에서 지시문을 사용하는 방법을 보여줍니다.

<div v-my-directive:foo.bar></div>

여기에서 "v-my-directive"는 지시문 이름이고, "foo"는 지시문 매개변수이며, "bar"는 지시문 수정자입니다. 명령어는 표현식도 허용할 수 있습니다.

<div v-my-directive="{ arg1: 1, arg2: &#39;foo&#39; }"></div>

명령 만들기

Vue 명령어를 사용하려면 먼저 명령어 함수를 정의해야 합니다. Vue 명령 함수는 el, 바인딩, vnode 및 oldVnode의 네 가지 매개변수를 허용할 수 있습니다. 이러한 매개변수는 명령어에 의해 바인딩된 요소의 DOM 요소, 명령어에 의해 바인딩된 객체, Vue 컴파일에 의해 생성된 가상 노드 및 이전 가상 노드입니다.

명령 함수에는 Vue 구성 요소의 후크 기능과 유사한 몇 가지 후크 기능이 있습니다. 다음은 몇 가지 일반적인 지시문 후크입니다.

• bind: 지시문이 요소에 처음 바인딩될 때 한 번만 호출됩니다. 여기에서 일부 초기 설정을 지정할 수 있습니다.
• inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(요소 노드에만 적용 가능).
• update: 구성 요소가 업데이트될 때 호출되지만 하위 구성 요소가 업데이트되기 전에 호출될 수도 있습니다.
• comComponentUpdated: 구성 요소 업데이트가 완료된 후 호출됩니다.
• unbind: 명령이 요소에서 바인딩 해제될 때 한 번만 호출됩니다.

다음은 간단한 사용자 정의 지시어 예입니다.

Vue.directive('my-directive', {
  bind: function (el, binding) {
    el.innerHTML = binding.value.toUpperCase();
  }
});

여기에서는 Vue.directive 함수를 사용하여 전역 지시어 my-directive를 정의합니다. 이 명령 함수에는 el 및 bind 매개변수를 허용하는 bind 후크가 있습니다. 이 지시문이 요소에 바인딩되면 el.innerHTML은 bind.value의 대문자 버전으로 설정됩니다. Vue.directive函数定义了一个全局指令my-directive。这个指令函数有一个bind钩子，接受el和binding参数。当这个指令绑定到元素上时，el.innerHTML会被设置成binding.value的大写形式。

使用指令

定义指令后，可以将其用作HTML元素的属性。以下示例演示了my-directive指令的用法：

<div v-my-directive="message"></div>

这里message是定义在Vue实例中的一个data属性。当指令被绑定到元素上时，message的值会传递给指令函数的binding.value参数并进行处理。

还可以用冒号指定指令的修饰符：

<div v-my-directive.some-modifier="message"></div>

在指令函数中，可以使用binding.modifiers来访问指令的修饰符。在这个例子中，如果指令名称为my-directive且有some-modifier修饰符，则binding.modifiers会返回{someModifier: true}的值。

移除指令

有时候需要动态地添加或删除指令。Vue.js提供了v-bind指令的简写方式:。因此，可以通过设置一个属性为null来移除一个指令：

<div v-bind:my-directive="condition ? message : null"></div>

在这个例子中，指令在条件condition

지시문 사용

지시문을 정의한 후에는 이를 HTML 요소의 속성으로 사용할 수 있습니다. 다음 예에서는 my-directive 지시문의 사용법을 보여줍니다.

rrreee

여기에서 message는 Vue 인스턴스에 정의된 데이터 속성입니다. 지시어가 요소에 바인딩되면 message 값이 지시어 함수의 bind.value 매개변수에 전달되어 처리됩니다. 🎜🎜콜론을 사용하여 명령의 수정자를 지정할 수도 있습니다. 🎜rrreee🎜명령 함수에서 bind.modifiers를 사용하여 명령의 수정자에 액세스할 수 있습니다. 이 예에서 지시문 이름이 my-directive이고 some-modifier 수정자가 있는 경우 bind.modifiers는 를 반환합니다. {someModifier: true} 값입니다. 🎜🎜명령 제거🎜🎜때때로 명령을 동적으로 추가하거나 제거해야 하는 경우가 있습니다. Vue.js는 v-bind 지시문에 대한 약어 :를 제공합니다. 따라서 속성을 null로 설정하여 지시문을 제거할 수 있습니다. 🎜rrreee🎜 이 예에서는 condition 조건이 충족되면 지시문이 요소에 바인딩되고 그렇지 않으면 요소에서 바인딩이 해제됩니다. 🎜🎜결론🎜🎜이 기사에서는 DOM 요소와 상호 작용 논리를 제어할 수 있는 Vue.js의 지시문 생성 및 사용을 소개합니다. 이제 지시문을 사용자 정의하고 Vue.js 애플리케이션을 향상시킬 수 있습니다. 🎜

위 내용은 Vue에서 지침을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!