Vue에서 사용자 정의 지시어를 개발하는 방법

이 글은 Vue Custom Instruction Directive 관련 정보를 주로 소개하고 있습니다. 필요한 친구들은 참고하시면 됩니다. 내용은 다음과 같습니다:

공식 웹사이트 스크린샷 예시

몇 가지 핵심 내부 정의 지침(

) 외에도 vue에서는 사용자가 자신의 기능 지침 중 일부를 등록할 수도 있습니다. 현재로서는 맞춤 지침이 가장 적합합니다.

예를 직접 살펴보겠습니다. 페이지가 로드되면 요소가 포커스를 받습니다(Safari 모바일 버전에서는 자동 포커스가 지원되지 않음). 즉, 페이지가 로드되면 아무런 작업 없이 양식이 자동으로 포커스를 받습니다. 양식의 코드는 다음과 같습니다.

Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`，在main.js文件里
 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用
 el.focus() // 聚焦元素
 }
})

v-model,v-if,v-for,v-show 로컬 지시문을 등록하려는 경우 구성 요소는 지시문 옵션도 허용합니다.

<script>
export default {
 directives: { // 指令的定义
  zsqfocus: {
   inserted: function (el) { // 获得焦点
    el.focus()
   }
  }
  }
 }
</script>

그런 다음 모든 구성 요소에서 새로운 v-zsqfocus 속성을 사용할 수 있습니다.

<template>
 <input v-zsqfocus /> //调用 
</template>

예시는 공식 홈페이지와 동일합니다. 지시어, 메소드, 마운트 등은 동일한 수준에 있어 동시에 사용할 수 있습니다.

PS: vue의 사용자 정의 명령 지시문의 예제 코드를 살펴보겠습니다. 구체적인 코드는 다음과 같습니다.

<template>
 <p>
  <input v-model="dir1" v-my-directive1="dir1"/>　　　　 <input v-model="dir2" v-my-directive2="dir2"/>
 </p>
</template>
<script>
 export default {
  data(){
   return {　　　　　　　　　dir1:&#39;&#39;,　　　　　　　　　dir2:&#39;&#39;
　　　　　　　}
  },
  directives:{　　　　　　　//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },　　　　　　　myDirective2:{　　　　　　　　　　bind(){　　　　　　　　　　　　　//第一次绑定到元素的准备工作　　　　　　　　　　},　　　　　　　　　　update(val，old){　　　　　　　　　　　　//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update　　　　　　　　　　　　console.log(val)　　　　　　　　　　},　　　　　　　　　　　　unbind(){　　　　　　　　　　　　//销毁前的清理工作　　　　　　　　　　}　　　　　　　}
  }
 }
</script>

위 내용은 모든 사람에게 도움이 되기를 바랍니다. 미래. 관련 기사:

vue에서 손가락으로 슬라이딩을 구현하는 방법

vue에서 인덱스 파일을 컴파일, 패키징 및 보는 방법

vue에서 Jade 템플릿을 사용하는 방법

in Angular Pass 템플릿 to Components

Node.js의 Async 및 Await 기능 사용

웹팩이 127.0.0.1에 접근할 수 없는 문제 해결

webpack-dev-server에서 원격 접속 설정 방법 구현

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