Vue의 사용자 정의 지시문에 대해 알아보기

Vue에서는 기본 핵심 지시문( v-model 및 v-show ) 외에도 사용자 지정 지시문 등록도 허용합니다. Vue에서 코드 재사용의 주요 형태와 추상화는 컴포넌트입니다. 그러나 어떤 경우에는 여전히 순수 DOM 요소에 대해 하위 수준 작업을 수행해야 하며, 이 경우 사용자 지정 지침이 사용됩니다. 이 기사에서는 Vue 사용자 정의 지침을 자세히 소개합니다. v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。本文将详细介绍Vue自定义指令

指令注册

　　以一个input元素自动获得焦点为例，当页面加载时，使用autofocus可以让元素将获得焦点 。但是autofocus在移动版Safari上不工作。现在注册一个使元素自动获取焦点的指令

　　指令注册类似于组件注册，包括全局指令和局部指令两种

【全局指令】

　　使用Vue.diretive()来全局注册指令

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

【局部指令】

　　也可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项

var vm = new Vue({
  el: '#example',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }

})

　　然后可以在模板中任何元素上使用新的 v-focus 属性

<p id="example">
  <input v-focus></p>

<script>// 注册一个全局自定义指令 v-focusVue.directive('focus', {  // 当绑定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()
  }
})var vm = new Vue({
  el: '#example',

})</script>

钩子函数

　　指令定义函数提供了几个钩子函数（可选） 

【bind】

　　只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

【inserted】

　　被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）

【update】

　　所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新

【componentUpdated】

　　所在组件的 VNode 及其孩子的 VNode 全部更新时调用

【unbind】

　　只调用一次， 指令与元素解绑时调用

钩子函数参数

　　钩子函数被赋予了以下参数

【el】

　　指令所绑定的元素，可以用来直接操作 DOM

【binding】

　　一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

【vnode】

　　Vue 编译生成的虚拟节点

【oldVnode】

　　上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

　　[注意]除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

　　下面是一个使用了这些参数的自定义钩子样例

<p id="example" v-demo:foo.a.b="message"></p>

<script>Vue.directive('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(', ')
  }
})new Vue({
  el: '#example',
  data: {
    message: 'hello!'
  }
})</script>

【函数简写】

　　 大多数情况下，可能想在bind和update

명령 등록

자동으로 포커스를 얻기 위한 입력 요소를 예로 들면, 페이지가 로드될 때 자동 포커스를 사용하여 요소가 포커스를 얻을 수 있도록 합니다. 하지만 모바일 Safari에서는 자동 초점이 작동하지 않습니다. 이제 요소에 자동으로 포커스를 주는 명령을 등록하세요

　명령 등록은 전역 명령 및 로컬 명령을 포함하여 구성 요소 등록과 유사합니다

【전역 명령】

Vue.diretive()를 사용하여 전역적으로 명령을 등록하세요

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

【로컬 Directives】

　 로컬 지시문을 등록할 수도 있고, 구성 요소 또는 Vue 생성자에서 directives 옵션을 허용할 수도 있습니다

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

　 그런 다음 템플릿 코드> 속성

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

rrreee

훅 기능 　 명령어 정의 함수는 여러 가지 Hook 기능을 제공합니다(선택 사항)

[bind]　 명령어가 처음으로 요소에 바인딩될 때 호출됩니다. 초기화 작업 실행을 정의하는 데 사용됩니다

【삽입됨】🎜🎜바운드 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드가 존재하는 한 호출할 수 있으며 문서에 존재할 필요는 없습니다)🎜 🎜【update】🎜🎜구성 요소의 VNode가 업데이트될 때 호출되지만 그러나 하위 VNode가 업데이트되기 전에 발생할 수 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하면 불필요한 템플릿 업데이트는 무시할 수 있습니다🎜🎜【comComponentUpdated】🎜🎜　모든 업데이트 시 컴포넌트 와 그 하위 VNode의 VNode가 호출됩니다🎜🎜【 unbind】🎜🎜　 한 번만 호출되며, 요소 바인딩을 해제할 때 명령이 호출됩니다. 🎜

Hook 함수 매개변수

🎜　Hook 함수에는 다음 매개변수가 제공됩니다.🎜🎜[el]🎜🎜　명령어에 의해 바인딩된 요소는 DOM을 직접 작동하는 데 사용됩니다🎜 🎜【바인딩】🎜🎜　다음 속성을 포함하는 객체: 🎜rrreee🎜【vnode】🎜🎜　 Vue 컴파일로 생성된 가상 노드 🎜🎜【oldVnode】🎜🎜　 이전 가상 노드, update 및 comComponentUpdated는 후크 🎜🎜　에서 사용할 수 있습니다. [참고] el을 제외한 다른 매개변수는 읽기 전용이므로 수정하지 마십시오. 후크 간에 데이터를 공유해야 하는 경우 요소의 데이터세트를 통해 공유하는 것이 좋습니다. 🎜🎜 다음은 이러한 매개변수를 사용하는 사용자 정의 후크의 예입니다. 🎜rrreeerrreee🎜🎜🎜【함수 약어】🎜🎜　 대부분의 경우 bind 및 update 후크에 대해 반복적인 작업을 수행하고 다른 후크 기능에 대해서는 신경 쓰지 않습니다. 다음과 같이 작성할 수 있습니다: 🎜rrreee🎜【객체 리터럴】🎜🎜　명령에 여러 값이 필요한 경우 JS 객체 리터럴을 전달할 수 있습니다. 명령 기능은 모든 법적 유형의 JS 표현식을 허용합니다. 🎜rrreeerrreee🎜🎜관련 권장 사항: 🎜🎜🎜🎜2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020 최신 5 vue.js 비디오 튜토리얼 Selection🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜🎜

위 내용은 Vue의 사용자 정의 지시문에 대해 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!