Vue 사용자 정의 명령 사용 방법 상세 설명
1.사용자 정의 명령 어 문법
Vue 사용자 정의 명령 어 문법 은 다음 과 같 습 니 다.
Vue.directive(id, definition)2.갈고리 함수
정의 대상 의 갈고리 함 수 는 다음 과 같 습 니 다.
갈고리 함수 의 매개 변수
el:명령 에 연 결 된 요 소 는 DOM 을 직접 조작 할 수 있 습 니 다.
binding:한 대상,다음 속성 포함:
*name:명령 명,v-접 두 사 는 포함 되 지 않 습 니 다.
*value:명령 의 바 인 딩 값,예 를 들 어 v-my-directive="1+1",value 의 값 은 2 입 니 다.
*old Value:명령 바 인 딩 의 이전 값 은 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 갈고리 에서 만 사용 할 수 있 습 니 다.
3.예
Vue 사용자 정의 명령 의 일반적인 사용 예 는 다음 과 같 습 니 다.
Vue.directive('my-directive', {
bind: function(){
//
// ，
},
inserted: function(){
//...
},
update: function(){
//
//
},
componentUpdated: function(){
//...
},
unbind: function(){
//
// bind
}
Vue.directive('my-directive', function(){
//...
})우 리 는 종종 명령 을 전역 으로 정의 합 니 다.방식 은 다음 과 같 습 니 다.
첫 번 째 단계:directive/directives.js 와 같은 전역 명령 파일 을 만 듭 니 다.
두 번 째 단계:Vue.directive()를 이용 하여 전역 명령 을 만 들 고 이 를 드 러 냅 니 다.예 를 들 어 하나의 focus 가 폼 에 자동 으로 초점 을 맞 춥 니 다.
directives.js
import Vue from 'vue';
Vue.directive('focus',{
// DOM
inserted: function(el){
el.focus(); //
el.setAttribute('placeholder',' ');
}
})
Vue.directive('***',{
inserted: function(el){
//....
}
})
export {Vue}
main.js
import directive from './components/global/directives';
<el-input v-model="input" placeholder="" v-focus></el-input>
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
----------
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
