Vue에서 사용자 정의 지침을 만드는 방법

Vue.directive() 메서드를 사용하여 Vue에서 사용자 정의 지시문을 만듭니다. 지시문 이름은 v- 접두사로 시작합니다. 지시문 옵션에는 바인딩, 삽입, 업데이트, 구성 요소 업데이트, 바인딩 해제 등과 같은 수명 주기 후크가 포함됩니다. 다양한 단계에서 DOM 요소를 작동하는 데 사용됩니다. 매개변수를 지정할 수 있습니다. 명령 이름 뒤에 콜론(: 매개변수 이름)을 추가하여 매개변수를 지정할 수 있습니다.

Vue에서 사용자 정의 지시문 만들기

Vue.directive() 메서드를 통해 Vue에서 사용자 정의 지시문을 만듭니다. 이 메소드는 지시문 이름과 지시문의 옵션을 포함하는 객체라는 두 가지 매개변수를 허용합니다. Vue.directive() 方法创建自定义指令。该方法接受两个参数：指令名称和一个包含指令选项的对象。

指令名称

指令名称必须以 v- 前缀开头，后跟一个驼峰式名称来标识指令。例如，v-myDirective。

指令选项

指令选项对象可以包含以下属性：

• bind (可选) 在元素插入 DOM 时调用一次。
• inserted (可选) 在元素被插入 DOM 后立即调用。
• update (可选) 在元素更新时调用。
• componentUpdated (可选) 在父组件更新后调用。
• unbind (可选) 在元素从 DOM 中移除时调用。

示例

例如，创建一个名为 v-highlight 的自定义指令，它会在元素上添加一个黄色背景：

Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});

然后，可以在模板中使用此指令：

<div v-highlight>突出显示此文本</div>

带参数的指令

指令也可以接受参数。要实现这一点，可以在指令名称后添加冒号 (: 参数名称)。例如，创建一个名为 v-size

명령 이름

🎜🎜명령 이름은 v- 접두사로 시작해야 하며 그 뒤에 명령을 식별하기 위한 camelCase 이름이 와야 합니다. 예를 들어 v-myDirective입니다. 🎜🎜🎜지시 옵션🎜🎜🎜지시 옵션 개체에는 다음 속성이 포함될 수 있습니다. 🎜

• 🎜bind(선택 사항)🎜 요소가 DOM에 삽입될 때 한 번 호출됩니다.
• 🎜inserted (선택 사항)🎜 요소가 DOM에 삽입된 후 즉시 호출됩니다.
• 🎜update (선택 사항)🎜 요소가 업데이트될 때 호출됩니다.
• 🎜comComponentUpdated (선택 사항)🎜 상위 구성 요소가 업데이트된 후 호출됩니다.
• 🎜unbind (선택 사항)🎜 요소가 DOM에서 제거될 때 호출됩니다.

🎜🎜Example🎜🎜🎜예를 들어, 요소에 노란색 배경을 추가하는 v-highlight라는 사용자 정의 지시문을 만듭니다. 🎜

Vue.directive('size', {
  bind: function (el, binding, vnode) {
    el.style.fontSize = binding.value + 'px';
  }
});

🎜그런 다음 다음을 사용할 수 있습니다. 템플릿의 지시어: 🎜

<div v-size="20">设置字体大小为 20px</div>

🎜🎜매개변수가 있는 지시어🎜🎜🎜지시어는 매개변수도 허용할 수 있습니다. 이렇게 하려면 지시문 이름 뒤에 콜론(: 매개변수 이름)을 추가하세요. 예를 들어 요소의 글꼴 크기를 매개변수 🎜rrreee🎜로 설정하는 v-size라는 사용자 정의 지시어를 생성한 다음 템플릿에서 이 지시어를 사용하고 매개변수 🎜rrreee를 전달할 수 있습니다.

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