Maison > Article > interface Web > Quelles sont les directives internes de Vue 2.0

Quelles sont les directives internes de Vue 2.0

一个新手original: 2017-10-16 09:49:101470parcourir

1. Introduction à Vue.js

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. 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 que « tout est un composant. L'idée de la composition est pratique pour le développement modulaire et est le front-end Une grande tendance dans le domaine

2. Les commandes internes

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

est le suivant :

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

Dans la structure DOM, trois p L'affichage du contenu de la balise sur la page dépend de l'attribut booléen du drapeau. Lorsque le drapeau est vrai, if et show seront affichés, ainsi que la différence entre v. -if et v-show n'existeront pas dans la structure DOM : 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 atteinte. est modifié, la page doit être chargée à nouveau ; v-show se chargera indépendamment du fait que la valeur de la condition soit vraie (si la condition est vraie, l'attribut d'affichage est défini sur son attribut par défaut, sinon, il est défini sur aucun)

Instruction de boucle 2-2.v-for

Les exemples sont les suivants :

<body>
    <div id="app">
     <ol>
         <li v-for="b in b">{{b}}</li>
     </ol>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,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 La commande v-text v-html text (chaîne html)

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

peut être associée à jquery text(), html() Jusqu'à présent, vous constaterez que l'opération d'interpolation est utilisée, c'est-à-dire {{}}, ce qui affectera les performances dans une certaine mesure

2-4 L'exemple de l'écouteur d'événement de liaison v-on <.> est le suivant :

De même, par analogie avec la méthode on() de jquery, liaison Pour des événements spécifiques, v-on : click peut être abrégé en @click dans l'exemple. Click peut être remplacé par d'autres opérations de souris, telles que mouseout, mouseover, etc. 2-5 Commande v-bind

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

L'exemple est le suivant. :

L'effet est que l'étiquette a s'affiche en rouge, et son attribut src est la directive v-bind Principalement utilisée pour définir les attributs des balises html, son abréviation est v-bind :——>:

2-6 Instruction de liaison bidirectionnelle de données de modèle V

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

L'exemple est le suivant :

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

2-7 commande v-pre

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

L'exemple est le suivant :

La première balise p génère "ingénieur front-end ", et les deux balises p ignoreront la compilation de vue et afficheront la valeur d'origine, à savoir {{message}}.

2-8 Commande v-cloak

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

La fonction de la commande v-cloak est de l'exécuter une fois l'arborescence DOM construite et la page rendue, et elle doit être combiné avec CSS Utiliser ensemble

Directive 2-9 v-once

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

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!

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：Comment comprendre les bases du JavaScript orienté objet et le problème de ce pointageArticle suivant：Comment comprendre les bases du JavaScript orienté objet et le problème de ce pointage

Articles Liés

Voir plus