Explication détaillée des instructions personnalisées de Vue.directive

Cette fois, je vous apporte une explication détaillée des instructions personnalisées de Vue.directive. Quelles sont les précautions pour les instructions personnalisées de Vue.directive. Voici des cas pratiques, jetons un coup d'œil.

1. Aujourd'hui, j'ai révisé le code de l'instruction personnalisée Vue, et un résultat très bouche bée est apparu. Je publierai 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 a été ouverte, elle était vide, la largeur et la hauteur ont été définies et p n'est pas devenu noir. Vérifiez que le code est correct et qu'il n'y a pas de erreurs de grammaire. 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 devant l'objet d'instanciation vue , sinon une erreur sera signalée comme Échec de la résolution de la directive ; enfin, postez le bon code de séquence

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser le générateur automatique dans ionic2

Explication détaillée de l'utilisation des composants JsChart

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!