vue.js 지시문이란 무엇입니까?

vue.js 명령어는 [v-if] 및 [v-show]와 같은 많은 내장 명령어입니다. 이러한 풍부한 명령어는 대부분의 비즈니스 요구를 충족할 수 있습니다. , 업데이트].

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 기사: vue.js】

질문 1: vue.js의 사용자 정의 지침이란 무엇입니까?

기본 DOM을 작동하기 위한 일부 명령을 사용자 정의

추가 참조

Vue에는 v-if 및 v-show와 같은 많은 내장 명령이 있습니다. 그러나 이러한 풍부한 명령은 대부분의 비즈니스 요구를 충족할 수 있습니다. 특별한 기능이 필요하지만 여전히 DOM에서 낮은 수준의 작업을 수행하고 싶고 사용자 정의 지침을 사용해야 합니다.

질문 2: 사용자 정의 명령어의 여러 후크 기능

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

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

• update: 구성 요소의 VNode가 업데이트될 때 호출되지만 해당 하위 VNode가 업데이트되기 전에 발생할 수 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하면 불필요한 템플릿 업데이트를 무시할 수 있습니다.

• comComponentUpdated: 명령어가 있는 구성 요소의 모든 VNode와 해당 하위 VNode가 업데이트된 후에 호출됩니다.

• unbind: 한 번만 호출되며, 명령이 요소에서 바인딩 해제될 때 호출됩니다.

질문 3: 후크 기능 매개변수

el을 제외한 다른 모든 매개변수는 읽기 전용이어야 하며 수정하면 안 됩니다. 후크 간에 데이터를 공유해야 하는 경우 요소의 데이터세트를 통해 수행하는 것이 좋습니다.

명령어 후크 기능은 다음 매개변수로 전달됩니다.

1.el: 명령에 바인딩된 요소를 사용하여 DOM을 직접 작동할 수 있습니다.

2. 바인딩: 다음 속성을 포함하는 개체:

• name: v- 접두사를 제외한 명령 이름.

• value: 지시문의 바인딩 값(예: v-my-directive="1 + 1"), 바인딩 값은 2입니다.

• oldValue: 명령 바인딩의 이전 값으로, update 및 componentUpdated 후크에서만 사용할 수 있습니다. 값이 변경되었는지 여부에 관계없이 사용할 수 있습니다.

• 표현식: 문자열 형식의 명령어 표현입니다. 예를 들어 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 컴파일로 생성된 가상 노드입니다.

3.oldVnode: 이전 가상 노드로, update 및 componentUpdated 후크에서만 사용할 수 있습니다.

질문 4: vue-cli에서 사용자 정의 지침을 사용하는 방법은 무엇입니까?

파일 구조:

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

모듈 아래에 새 foucs.js 만들기

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

src/directives/index.js 아래

import focus from './modules/focus'
export {focus}

src/main.js 아래에서 지시어를 사용하여 지침 맞춤화

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

In. Vue 구성 요소에서

<input v-focus type="text" />

사용 관련: JavaScript(비디오)

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