Vue 수명 주기,수 동 마 운 트 및 마 운 트 하위 구성 요소 깊이 이해

본 고 는 Vue 생명주기 와 수 동 마 운 트 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
1.vue 의 생명주기:

2,$mount()수 동 마 운 트
Vue 인 스 턴 스 가 el 속성 이 없 을 때 이 인 스 턴 스 는 dom 에 마 운 트 되 지 않 았 습 니 다.
마 운 트 지연 이 필요 하 다 면 나중에 vm.$mount()방법 으로 마 운 트 할 수 있 습 니 다.
예 를 들 면:
방법 1:

<div id="app"> 
 {{name}} 
</div> 
<button onclick="test()">  </button> 
<script> 
 var obj= {name: '  '} 
 var vm = new Vue({ 
  data: obj
 }) 
 function test() { 
  vm.$mount("#app"); 
 } 

방법 2:
Vue.extend()는 마 운 트 되 지 않 은 하위 클래스 를 만 드 는 데 사 용 됩 니 다.이 하위 로 여러 개의 인 스 턴 스 를 만 들 수 있 습 니 다.

var app= Vue.extend({ 
 template: '<p>{{firstName}} {{lastName}}</p>', 
   data: function () { 
    return { 
    firstName: 'Walter', 
    lastName: 'White' 
    } 
    } 
   }) 
 //    app  ，         。 
 new app().$mount('#app') 

다음은 자동 삽입 label 을 사용 합 니 다.
수 동 마 운 트 플러그 인:https://vuefe.cn/api/#Vue-extend
코드 를 쓰기 시작 하 다
1.user-name.vue 에 잘못된 label 을 삭제 합 니 다.수 동 으로 삽입 해 야 하기 때 문 입 니 다.

<label class="label label-danger">     </label>

2.먼저 우리 플러그 인 vaidate.js 의 모든 코드 를 보고 분석 합 니 다.

export default{
  install(Vue){

    Vue.prototype.checkUserName = (value) => {
      if(value == ""){
        return true; //       ,   true
      }

      if(/\w{6,20}/.test(value)){
        return true;
      }else{
        return false;
      }
    }

    Vue.prototype.errorLabel = null;
    Vue.prototype.hasError = false;

    Vue.directive("uname",{
      bind(){
        let errorTpl = Vue.extend({
          template:'<label class="label label-danger">     </label>'
        });
        //       
        Vue.errorLabel = (new errorTpl()).$mount().$el;
      },
      update(el,binding,vnode){
        if(/\w{6,20}/.test(el.value)){
          //     
          if (Vue.hasError){
            el.parentNode.removeChild(Vue.errorLabel);
            Vue.hasError = !Vue.hasError;
          }
        }else{
          //       
          if (!Vue.hasError){
            el.parentNode.appendChild(Vue.errorLabel);
            Vue.hasError = ! Vue.hasError;
          }

        }
      },
    })
  }
}

3,프로 토 타 입 2 개 정의

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;

error Label 오류 알림 템 플 릿 입 니 다.bind()방법 에서 만 든 다음 마 운 트 합 니 다.hasError 는 보조 속성 입 니 다.현재 오류 가 있 는 지 없 는 지 판단 하 는 데 편리 합 니 다.
4.update()방법 에서 사용자 의 입력 을 실시 간 으로 감청 한 다음 에 오류 템 플 릿 을 제거/추가 합 니 다.

 update(el,binding,vnode){
   if(/\w{6,20}/.test(el.value)){
     //     
     if (Vue.hasError){
       el.parentNode.removeChild(Vue.errorLabel);
       Vue.hasError = !Vue.hasError;
     }
   }else{
     //       
     if (!Vue.hasError){
       el.parentNode.appendChild(Vue.errorLabel);
       Vue.hasError = ! Vue.hasError;
     }
   }
 },

5.데모 효 과 는 다음 그림 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.