recherche

Maison >interface Web >js tutoriel >Directives internes de Vue 2.0

Directives internes de Vue 2.0

php中世界最好的语言
php中世界最好的语言original
2018-04-17 14:39:561502parcourir

Cette fois, je vous apporte les instructions internes de Vue 2.0. Quelles sont les précautions lors de l'utilisation des instructions internes de Vue 2.0. Voici des cas pratiques, jetons un coup d'œil.

1.Vue.js introduction

​​​​ Il existe actuellement trois frameworks front-end traditionnels : Angular, React et Vue. En raison de la controverse sur la licence de React il y a quelque temps, la popularité de Vue a augmenté. De plus, la documentation conviviale de l’API de Vue est une fonctionnalité majeure. Vue.js est un outil très léger, ressemblant plus à une bibliothèque js qu'à un framework MVVM. Vue.js propose une programmation et une composantisation réactives. La programmation réactive signifie garder l'état et la vue synchronisés, et l'état peut également être considéré comme des données ; et son concept de composition est le même que celui de React, c'est-à-dire « tout est un composant, et l'idée de la composition est pratique pour modularisation Le développement est une tendance majeure dans le domaine du front-end

2. Commandes internes

2-1.v-if v-else v-show : Les deux premiers sont généralement utilisés ensemble, et l'effet de v-show est similaire à celui de v-if.

Les exemples sont les suivants : 

<body>
  <p id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

Dans la structure DOM, l'affichage ou non du contenu des trois balises p sur la page dépend de l'attribut booléen du drapeau. Lorsque flag est vrai, if et show seront affichés, et else n'existera pas dans la structure DOM. La différence entre v-if et v-show se reflète dans : v-if détermine s'il faut charger en fonction de la valeur de la condition, ce qui peut réduire la pression sur le serveur, mais l'inconvénient est que lorsque la valeur de la condition est modifié, la page doit être chargée à nouveau ; v-show n'a pas d'importance. Que la valeur de la condition soit vraie, elle sera chargée (si la condition est vraie, l'attribut display est défini sur sa valeur par défaut attribut, sinon, il est défini sur aucun)

Commande de boucle 2-2.v-for

Les exemples sont les suivants : 

<body>
  <p id="app">
   <ol>
     <li v-for="b in b">{{b}}</li>
   </ol>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>

La page affichera 5 li L'effet de l'interpolation est que li affichera les éléments correspondant au tableau b un à un. v-for est quelque peu similaire à for in loop

. 2-3 commande v-text v-html text (htmlstring)

<body>
  <p id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中国</span>"
    }
  });
</script>

Vous pouvez penser aux text() et html() de jquery. À présent, vous constaterez que les opérations d'interpolation précédentes sont utilisées, c'est-à-dire {{}}. Cette approche affectera les performances dans une certaine mesure.

Écouteur d'événements de liaison 2-4 v-on

Les exemples sont les suivants : 

<body>
  <p id="app">
   <button v-on:click="Hi()">Button</button>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>

De la même manière, par analogie avec la méthode on() de jquery, utilisée pour lier des événements, v-on:click dans l'exemple peut être abrégé en @click. Le clic peut être remplacé par d'autres opérations de la souris, telles que le retrait de la souris, le survol de la souris, etc.

2-5 commandes v-bind

Les exemples sont les suivants : 

<body>
  <p id="app">
    <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

L'effet est que l'étiquette a s'affiche en rouge et son attribut src est vm.message. La directive v-bind est principalement utilisée pour définir les attributs de la balise html . Son abréviation est v-bind :——>:

. 2-6 instructions de liaison bidirectionnelle de données du modèle V

Les exemples sont les suivants : 

<body>
  <p id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

Lorsque la valeur d'entrée change, le contenu contenu dans la balise p changera également et restera cohérent avec le premier.

2-7 commande v-pre

Les exemples sont les suivants : 

<body>
  <p id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

La première balise p génère "ingénieur front-end", tandis que la deuxième balise p ignorera la compilation de vue et affichera la valeur d'origine, à savoir {{message}}.

2 à 8 commandes v-cloak

La fonction de l'instruction v-cloak est de l'exécuter une fois l'arborescence DOM construite et la page rendue, et elle doit être utilisée avec css

Commande 2-9 v-once

La directive v-once ne fonctionne que lorsque l'arborescence DOM est rendue pour la première fois.

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 aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



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!

php jquery css vue.js html angular if for 字符串 循环 JS 事件 dom display input li
Déclaration：
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
Article précédent：Méthode de mise en œuvre de la mise en page multi-colonnes dans le développement front-endArticle suivant：Méthode de mise en œuvre de la mise en page multi-colonnes dans le développement front-end

Articles Liés

Voir plus