이 글은 Vue Custom Instruction Directive 관련 정보를 주로 소개하고 있습니다. 필요한 친구들은 참고하시면 됩니다. 내용은 다음과 같습니다:
공식 웹사이트 스크린샷 예시
몇 가지 핵심 내부 정의 지침(
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:'', dir2:''
}
},
directives:{ //直接绑定函数,作用等同于update,不做准备工作和扫尾工作
myDirective1(val){
console.log(val)
}, myDirective2:{ bind(){ //第一次绑定到元素的准备工作 }, update(val,old){ //在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update console.log(val) }, unbind(){ //销毁前的清理工作 } }
}
}
</script>
vue에서 인덱스 파일을 컴파일, 패키징 및 보는 방법
in Angular Pass 템플릿 to Components
webpack-dev-server에서 원격 접속 설정 방법 구현
위 내용은 Vue에서 사용자 정의 지시어를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!