Vue 사용자 정의 지침(코드 예제) 학습 및 이해

이 글의 내용은 Vue 사용자 정의 지침(코드 예제)을 배우고 이해하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에 프로젝트를 완료하고 장면을 구현해야 했습니다. 영역을 클릭하면 편집 영역이 팝업되고 페이지의 다른 곳을 클릭하면 편집 영역이 숨겨질까 생각했습니다. 이전에 메소드를 작성할 때 갑자기 이 문제를 우아하게 해결하기 위해 vue 관련 것들을 사용해 볼 수 있겠다는 생각이 들었고, 다음과 같은 사용자 정의 지침을 배웠습니다.

1 Vue 사용자 정의 지시문

1.1 정의

공식 홈페이지의 소개만 보시면(제 생각엔) 공식 문서에는 매우 명확하므로 기본적으로 복사했습니다.)

Vue에서는 핵심 기능에 기본으로 내장된 명령어(v-model 및 v-show) 외에도 사용자 정의 명령어를 등록할 수 있습니다. Vue2.0에서 코드 재사용 및 추상화의 주요 형태는 구성 요소입니다. 그러나 어떤 경우에는 여전히 일반 DOM 요소에 대해 낮은 수준의 작업을 수행해야 하며, 이 경우 사용자 지정 지시문이 사용됩니다.

1.2 기본 구현

이것은 두 가지 상황으로 나눌 수 있습니다. 전역 사용자 정의 구성 요소를 정의하려면 프로젝트의 main.js에서 정의합니다. 공식 웹 사이트의 auto-focus 명령

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

특정 구성 요소 내에서 사용할 로컬 명령을 정의하려면 해당 구성 요소에서 정의하십시오

// 跟 data(),methods:{} 那些同级写了
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

#🎜🎜 # 정의한 후에는 즐겁게 사용할 수 있습니다

<input v-focus>

1.2 후크 기능

물론 이 사용자 정의 명령은 실제 ​​문제를 해결하기 위한 단순한 것이 아닙니다. 생활 시나리오에서 Vue는 멋진 작업을 구현하기 위한 여러 가지 후크 기능을 제공합니다. 세부 정보는 다음과 같습니다(모두 선택 사항).

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

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

update: 구성 요소의 VNode가 업데이트될 때 호출되지만 해당 하위 VNode가 업데이트되기 전에 발생할 수 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

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

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

다음으로 후크 기능의 매개변수(예: el, 바인딩, vnode 및 oldVnode)를 살펴보겠습니다.

물론 이 Hook 기능을 잘 활용하고 싶다면 아래의 파라미터 사용법을 알아야 합니다

1.3 Hook 기능 파라미터

#🎜 🎜# 명령 후크 기능 다음 매개변수가 전달됩니다.

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

bind: 다음 속성을 포함하는 객체:

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 컴파일로 생성된 가상 노드입니다. 자세한 내용을 알아보려면 VNode API로 이동하세요.

oldVnode: 이전 가상 노드, 업데이트 및 구성 요소 업데이트 후크에서만 사용할 수 있습니다.

그럼 공식 홈페이지에 할 말이 있습니다

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

그럼 아래에 간단한 예를 들어보겠습니다

// 在组件内部定义一个局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} <br>
        value: ${s(binding.value)} <br>
        expression: ${s(binding.expression)} <br>
        argument: ${s(binding.arg)} <br>
        modifiers: ${s(binding.modifiers)} <br>
        vnode keys: ${Object.keys(vnode).join(', ')}`
    }
  }
}
 // 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>

그러면 웹페이지에 이런 문구가 많이 떠있는 것을 볼 수 있습니다 (물론 아래 댓글들은 제가 직접 쓴 것입니다)

name: "demo" 
// 指定名称
value: "Welcome to Your Vue.js App" 
// 指令绑定值
expression: "message" 
// 字符串形式的指令表达式
argument: "foo" 
// 传给指令的参数
modifiers: {"a":true,"b":true} 
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点

# 🎜🎜#1.4 함수 약어

많은 경우 다른 후크에 신경 쓰지 않고 바인드 및 업데이트 중에 동일한 동작을 트리거할 수 있습니다. 예를 들어 다음과 같이 작성합니다.

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 Object literal

명령에 여러 값이 필요한 경우 JavaScript 객체 리터럴을 전달할 수 있습니다. 지시문 함수는 모든 합법적인 JavaScript 표현식을 허용한다는 점을 기억하십시오.

<div v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></div>

rrre

위 내용은 Vue 사용자 정의 지침(코드 예제) 학습 및 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!