Le contenu partagé avec vous dans cet article est un résumé des instructions couramment utilisées dans Vue. Le contenu est très détaillé. Examinons ensuite le contenu spécifique, dans l'espoir d'aider les amis dans le besoin.
1 Commandes communes
Commande v-if
Commande v-show
Commande v-else
Commande v-for
Commande v-bind
v-model
commande v-on
commande v-text
1.1 v-if
est une instruction de rendu conditionnel, qui supprime et insère des éléments en fonction de l'expression vraie ou fausse. Sa syntaxe de base est la suivante :
v-if="expression"
expression est une expression qui renvoie une valeur booléenne. be a L'attribut bool peut également être une expression d'opération qui renvoie bool. Par exemple :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script> </html>
Le résultat affiché est le suivant,
Remarque : L'instruction v-if est basée sur la valeur de l'expression conditionnelle Effectuer l'insertion ou la suppression d'éléments .
1.2 directive v-for
v-for
rend une liste basée sur un tableau Elle est similaire à la syntaxe de parcours de JavaScript :
v-for="item in items"
items est un tableau, item est l'élément du tableau actuellement parcouru.
Exemple de code :
name age {{item.name}} {{item.age}}
1.3 La directive v-bind peut prendre un paramètre après son nom, séparé par deux points. Ce paramètre est généralement un attribut de l'élément HTML, pour. exemple : v-bind:class
v-bind:argument="expression"
1.4 v-model
Laisser les éléments de formulaire et les données réaliser une liaison bidirectionnelle (relation de mappage)
Exemple de code
<p id="app"> <p v-text="message"> </p> <input type="text" v-model="message"> </p> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:"nice to meet you" } })</script>
1.5 v La directive -on est utilisée pour surveiller les événements DOM. Sa syntaxe est similaire à v-bind. Par exemple, pour surveiller l'événement click de l'élément façons d'appeler la méthode :
Lier une méthode (laisser l'événement pointer vers une référence à la méthode) ou utiliser une instruction en ligne.<a v-on:click="doSomething">
Le bouton Greet lie son événement click directement à la méthode greet(), tandis que le bouton Hi appelle la méthode say().
Il est très courant d'appeler ou
. Comme mentionné précédemment, les modificateurs sont représentés par des suffixes d'instruction commençant par un point. event.preventDefault()
event.stopPropagation()
v-on
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <p v-on:click.capture="doThis">...</p> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <p v-on:click.self="doThat">...</p>
1.6 La directive v-text vise principalement à empêcher {{}} d'apparaître sur la page lors du premier chargement de la page
<!--完整语法--> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--缩写语法--> <a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--完整语法--> <button v-on:click="greet">Greet</button> <!--缩写语法--> <button @click="greet">Greet</button>
Recommandations associées :
v-text="expresstion"
Exemples d'utilisation de typeof dans ECMAScript
Comment vue.js implémente-t-il l'encapsulation de table arborescente ? Comment implémenter une table arborescente dans vue.js
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!