Maison > Article > interface Web > Liaison unidirectionnelle Vuejs, liaison bidirectionnelle, rendu de liste, fonction de réponse
Que sont les composants ?
Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également prendre la forme d'éléments HTML natifs, étendus avec l'attribut is.
Ensuite, je vais vous présenter les connaissances de base de la liaison unidirectionnelle, de la liaison bidirectionnelle, du rendu de liste et des fonctions de réponse de vuejs. Les détails spécifiques sont les suivants :
(1). ) Liaison unidirectionnelle
<div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
①el devrait signifier liaison. La balise de liaison id=app
peut également être modifiée comme suit :
<div class="app"> {{ message }} </div>
el : '.app',
sont tout aussi efficaces.
Mais s'il y en a plusieurs, cela n'est valable que pour le premier :
<div class="app"> {{ message }} </div> <div class="app"> {{ message }} </div> Hello Vue.js! {{ message }}
②La variable message dans data représente la valeur de {{message}
(2) Liaison bidirectionnelle
<div id="app"> {{ message }} <br/> <input v-model="message"/> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
L'effet est :
①Il y a une valeur initiale dans la zone de saisie, et la valeur est la valeur du attribut de message dans les données ;
②La modification de la valeur de la zone de saisie peut affecter la valeur extérieure
(3) Valeur de retour de la fonction
<div id="app"> {{ message() }} <br/> <input v-model="message()"/> </div> <script> new Vue({ el: '#app', data: { message: function () { return 'Hello Vue.js!'; } } }) </script>
Effet :
①La valeur de sortie est également la valeur de retour du message
②Inconvénient : perte de la liaison bidirectionnelle ;
(4) Liste de rendu
<div id="app"> <ul> <li v-for="list in todos"> {{list.text}} </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [ {text: "1st"}, {text: "2nd"}, {text: "3rd"} ] } }) </script>
La liste en v-for est similaire à i in for in,
personnel Je pense que
① peut être compris comme pour list in todos
② et ensuite le list.text sur la ligne suivante peut être compris comme todos[list].text
Ensuite, où se trouve la balise v-for, copiez-la plusieurs fois en unités.
(5) Traitement des entrées utilisateur
<div id="app"> <input v-model="message"> <input type="button" value="值+1" v-on:click="add"/> <input type="button" value="值-1" v-on:click="minus"/> <input type="button" value="重置归零" v-on:click="reset"/> </div> <script> new Vue({ el: '#app', data: { message: 1 }, methods: { add: function () { this.message++; //这步要加this才能正确获取到值 }, minus: function () { this.message--; }, reset: function () { this.message = 0; } } }) </script>
Effet :
① Pour la valeur de la zone de saisie, cliquez une fois sur le bouton Ajouter, la valeur est 1;
②S'il ne peut pas être ajouté, le résultat sera renvoyé comme si l'expression normale était ajoutée de manière incorrecte, comme NaN
③La valeur du message dans les données est la valeur initiale ; 🎜>
④methods est un ensemble de fonctions, séparées par des virgules ⑤ Lors de l'obtention de la valeur, ajoutez ceci Par exemple, this.message obtient la valeur du message.<div id="app"> <input v-model="val" v-on:keypress.enter="addToList"> <ul> <li v-for="val in values"> {{val.val}} <input type="button" value="删除" v-on:click="removeList($index)"/> </li> </ul> </div> <script> new Vue({ el: '#app', data: { val: "1", values: [] }, methods: { addToList: function () { var val = parseInt(this.val.trim()); //注意,因为当上面的val是字符串类型的时候,才能用trim(),如果是数字类型,则用this.val if (val) { this.values.push({val: val}); } this.val = String(val + 1); }, removeList: function (index) { this.values.splice(index, 1); } } }) </script>
<input v-model="DATE" type="date"/> <li>{{DATE}}</li>
data: { val: "1", values: [] }, methods: { addToList: function () { console.log(this.val);
Le this.val ici est le data.val ci-dessus, qui est également html {{val}} dans est également v-model="val", mais pas val.val dans
<li v-for="val in values"> {{val.val}} <input type="button" value="删除" v-on:click="removeList($index)"/> </li>
. Quant à la raison, je pense personnellement que c'est ici. Le val est dans la portée de v-for, donc le val dans val in valeurs a une priorité plus élevée dans la chaîne de portée
J'espère que cela sera utile à tout le monde. Si vous avez des questions, laissez-moi un message, l'éditeur répondra à tout le monde à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !
Pour plus d'articles liés à la liaison unidirectionnelle, à la liaison bidirectionnelle, au rendu de liste et aux fonctions de réponse de Vuejs, veuillez faire attention au site Web PHP chinois !