Maison > Article > interface Web > Directives internes de Vue 2.0
Directives internes de Vue 2.0
- php中世界最好的语言original
- 2018-04-17 14:39:561418parcourir
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:'red'}" :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!