vue 지시어 지시어

이 글에서는 참고용으로 Vue 지시문을 사용하는 방법을 공유합니다. 구체적인 내용은 다음과 같습니다

1. 지시문 등록

지시문은 컴포넌트와 마찬가지로 먼저 등록해야 합니다. 두 가지 방법이 있습니다. 하나는 글로벌 등록입니다:

Vue.directive('dirName',function(){
 
　　//定义指令
 
});

다른 하나는 로컬 등록입니다:

new Vue({
 
　　directives:{
 
　　　　dirName:{
 
　　　　　　//定义指令
 
　　　　}
 
　　}
 
});

2. 명령어 정의

공식적으로는 각 수명주기를 나타내는 5가지 Hook 기능을 제공합니다.

bind: 명령이 처음으로 요소에 바인딩될 때 한 번만 호출됩니다. 이 후크 함수는 바인딩 시 한 번 실행되는 초기화 작업을 정의하는 데 사용할 수 있습니다.

inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드가 존재하고 문서에 존재할 필요가 없는 한 호출할 수 있습니다).

update: 바인딩 값 변경 여부에 관계없이 바인딩된 요소가 있는 템플릿이 업데이트될 때 호출됩니다. 업데이트 전과 후의 바인딩 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

comComponentUpdated: 바인딩된 요소가 있는 템플릿이 업데이트 주기를 완료할 때 호출됩니다.

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

여기에 있는 다른 것들은 템플릿 업데이트(업데이트)와 관련하여 이해하기 쉽습니다. 명령이 있는 템플릿이 변경되어 다시 렌더링되어야 하는 경우입니다. 입력 상자가 변경됩니다. 변경이 발생하면 명령이 실행됩니다. 물론 여기서 말하는 내용은 다소 모호하며 세부 사항은 아직 연구해야 합니다.

이 코드는 업데이트 사용을 구현할 수 있습니다

<p id="app">
　　<input type="text" v-focus="name" v-model="name" :data-name="name">
　　<button type="button" @click="name=&#39;zw&#39;">click</button>
 
　　<!--当点击按钮的时候name改变，继而触发update中的方法-->
</p>
<script>
 
　　Vue.directive(&#39;focus&#39;,{
　　　　bind: function(el, binding){
　　　　console.log(&#39;bind:&#39;,binding.value);
　　},
　　inserted: function(el, binding){
　　　　console.log(&#39;insert:&#39;,binding.value);
　　},
　　update: function(el, binding, vnode, oldVnode){
　　　　el.focus();
　　　　console.log(el.dataset.name);//这里的数据是可以动态绑定的
　　　　console.table({
　　　　　　name:binding.name,
　　　　　　value:binding.value,
　　　　　　oldValue:binding.oldValue,
　　　　　　expression:binding.expression,
　　　　　　arg:binding.arg,
　　　　　　modifiers:binding.modifiers,
　　　　　　vnode:vnode,
　　　　　　oldVnode:oldVnode
　　　　});
　　},
　　componentUpdated: function(el, binding){
　　　　console.log(&#39;componentUpdated:&#39;,binding.name);
　　}
});
new Vue({
　　el:&#39;#app&#39;,
　　data:{
　　　　name:&#39;zwzhai&#39;
　　}
});
</script>

3. Hook 함수 정의

다음은 공식적으로 제공되는 여러 매개변수입니다.

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

바인딩: 다음 속성을 포함하는 개체:

이름: v- 접두사를 제외한 명령 이름.

value: 지시문의 바인딩 값(예: v-my-directive="1 + 1"), value 값은 2입니다.
oldValue: 명령어 바인딩의 이전 값으로, update 및 componentUpdated 후크에서만 사용할 수 있습니다. 값이 변경되었는지 여부에 관계없이 사용할 수 있습니다.
표현식: 바인딩된 값의 문자열 형식입니다. 예를 들어 v-my-directive="1 + 1" 의 경우 표현식 값은 "1 + 1"입니다.
arg: 명령에 전달된 매개변수입니다. 예를 들어 v-my-directive:foo의 경우 arg 값은 "foo"입니다.
수정자: 수정자를 포함하는 개체입니다. 예를 들어 v-my-directive.foo.bar에서 modifier object modifiers의 값은 { foo: true, bar: true }입니다.
vnode: Vue 컴파일로 생성된 가상 노드입니다. 자세한 내용은 VNode API를 확인하세요.
oldVnode: 이전 가상 노드로, update 및 componentUpdated 후크에서만 사용할 수 있습니다.


이러한 매개변수는 문서를 읽어보면 알 수 있으므로 자세히 설명하지 않겠습니다. Bingding의 여러 속성에 대한 내 견해를 공유하겠습니다. 값 속성은 리터럴 또는 A 단일로 전달될 수 있습니다. 명령문(위와 같음)은 ;과 같은 변수 형식일 수도 있습니다. value 바인딩 값에 액세스할 때 얻는 것은 직접 작성된 이름, 즉 v-focus="name"이 아니며, 이 이름은 항상 변수이므로 정의하고 할당해야 하며 arg는 값에 직접 액세스할 수 있습니다. , v-focus :foo와 같은 경우 후크 함수에서 얻는 것은 문자열 foo입니다.

vue 명령어에서는 양방향 데이터 바인딩이 허용되지 않습니다. 공식이 말했듯이 el을 제외한 다른 매개변수는 수정하지 마세요. 후크 간에 데이터를 공유해야 하는 경우 요소의 데이터세트를 통해 수행하는 것이 좋습니다. 데이터 세트에 대한 추가 정보는 다음과 같습니다.

data-는 HTML5의 새로운 속성입니다. 브라우저 지원 수준을 확인한 후 현재 모든 주류 브라우저는 이를 지원해야 합니다. 구체적인 사용법: HTML에서 data-yourname="value"라는 속성으로 작성합니다. js에서 이 속성을 가져오려면 getAttribute 메서드를 사용할 필요가 없지만 js에서 직접 ele.dataset.yourname에 액세스합니다. 당신은 또한 추가 및 삭제할 수 있습니다. 추가: ele.dataset.dessert="yourname", 삭제: dette ele.dataset.name. 또한 이 특성은 CSS 선택기로 사용할 수 있습니다: .class[data-name]:{}.

위 내용은 vue 지시어 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!