Maison > interface Web > Tutoriel H5 > le corps du texte

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

php中世界最好的语言
Libérer: 2018-03-27 15:38:28
original
2365 Les gens l'ont consulté

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

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

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!

É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