J'ai trouvé un problème avec les directives personnalisées dans Vue.directive

Cet article présente principalement un résumé des problèmes avec les instructions personnalisées Vue.directive. Les amis dans le besoin peuvent s'y référer

1 Aujourd'hui, j'ai examiné le code des instructions personnalisées Vue, et un résultat très bouche bée est apparu. . , postez d'abord le code.

2.

<p id="example" v-change-by="myColor"></p>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
  </script>

3. Lorsque la page est ouverte, elle est vide, la largeur et la hauteur sont définies, et p. ne devient pas noir. Vérifiez que le code est correct et qu'il n'y a pas d'erreurs de syntaxe. Ensuite, j'ai examiné s'il s'agissait d'un problème avec le fichier vue.min.js, puis j'ai téléchargé la version de développement sur le site officiel et utilisé vue.js. Le résultat fut une découverte surprenante.

4. Il s'avère que la version de production vue.min.js ne prend pas en charge le rapport d'erreurs, ce qui est vraiment un piège !

5. J'ai enfin compris la raison, et il est très important que l'instruction soit écrite avant l'objet d'instanciation vue, sinon une erreur sera signalée comme Échec de la résolution de la directive, le code de séquence correct est affiché ;

<p id="example" v-change-by="myColor"></p>
  <script>
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
  </script>

6. La page de sortie finale est parfaite... petits problèmes auxquels il faut prêter attention.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Explication détaillée de la déduplication et de l'optimisation des tableaux numériques à l'aide de js pour construire un arbre binaire

Détaillé explication de l'introduction globale par Vue de la solution de traitement bass .scss

Utilisation d'un nœud pour créer votre propre tutoriel d'outil de ligne de commande

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!