Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-05-22 16:02:17
original
2985 Les gens l'ont consulté

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"); 
 }
Copier après la connexion

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;)
Copier après la connexion
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>
Copier après la connexion
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;
          }

        }
      },
    })
  }
}
Copier après la connexion
3 , deux modèles d'invite d'erreur prototypes

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;
Copier après la connexion
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;
     }
   }
 },
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!