Cycle de vie de Vue, montage manuel et sous-composants de montage

Cet article vous présente principalement le cycle de vie de Vue et le montage manuel. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Le cycle de vie de vue :

2. 🎜>

Lorsque l'instance Vue n'a pas l'attribut el, l'instance n'a pas encore été montée sur un dom

Si vous devez retarder le montage, vous vous pourrez le faire plus tard. Appelez manuellement la méthode vm.$mount() pour monter.

Par exemple :

Méthode 1 :

<p id="app"> 
 {{name}} 
</p> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: &#39;张三&#39;} 
 var vm = new Vue({ 
  data: obj
 }) 
 function test() { 
  vm.$mount("#app"); 
 }

Méthode deux :

Vue.extend() est utilisé pour créer une sous-classe non montée. Vous pouvez utiliser cette sous-classe pour créer plusieurs instances

var app= Vue.extend({ 
 template: &#39;<p>{{firstName}} {{lastName}}</p>&#39;, 
   data: function () { 
    return { 
    firstName: &#39;Walter&#39;, 
    lastName: &#39;White&#39; 
    } 
    } 
   }) 
 // 创建 app实例，并挂载到一个元素上。 
 new app().$mount(&#39;#app&#39;)

Ci-dessous, nous utilisons l'insertion automatique d'étiquettes

Montez manuellement le plug-in : https://vuefe.cn/api/#Vue-extend

Écrivez le code à la main

1. d'abord Le mauvais label s'affiche dans .vue car nous devons insérer manuellement

<label class="label label-danger">用户不合法</label>

2. Regardez d'abord tout le code de notre plug-in validate.js, puis nous analysons

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 , deux modèles d'invite d'erreur prototypes

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

errorLabel sont définis. Nous les créons dans la méthode bind(), puis les montons dessus hasError est un attribut auxiliaire, ce qui est pratique pour. à nous de juger s'il y a actuellement une erreur ou pas d'erreur.

4. Dans la méthode update(), surveillez les entrées de l'utilisateur en temps réel, puis supprimez/ajoutez le modèle d'erreur

 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. ci-dessous

Recommandations associées :

Quel est le cycle de vie de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!