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: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</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: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</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: &#39;#app&#39;,
data: {
message: function () {
return &#39;Hello Vue.js!&#39;;
}
}
})
</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: &#39;#app&#39;,
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: &#39;#app&#39;,
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.

(6) Multifonctionnel

<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: &#39;#app&#39;,
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>

Effet :

①La valeur initiale dans la zone de saisie est 1 ;

② Appuyez sur la touche Entrée dans la zone de saisie, et le contenu de la zone de saisie sera converti en nombres et ajouté à une liste. Les nombres convertis et un bouton de suppression seront dans la liste, et le. le contenu de la zone de saisie sera La valeur devient la valeur convertie en nombre plus un.

Comme le montre la figure :

③ Son ajout utilise une liaison bidirectionnelle pour pousser la valeur d'entrée vers les valeurs du données. Graine de tableau, puis utilisez l'effet du rendu de la liste pour générer des valeurs multilignes.

④Dans la balise bouton, le nom du paramètre de la fonction est donné à un paramètre, qui est l'index de la ligne. Le nom du paramètre est $index

⑤In. la balise bouton, la fonction déclenchée. Le nom de la fonction peut être ajouté avec ou sans parenthèses. Les tests réels semblent n'avoir aucun effet.

(7) Balises et résumé de l'API (1)

① {{ nom de la variable}}

représente la variable liée, et celle-ci doit être utilisée lorsque appelant. Le nom de la variable

② v-model="Variable"

est utilisé pour la liaison bidirectionnelle Si aucun type n'est ajouté à l'entrée, c'est du texte If. est ajouté, il est de type :

<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>

liera la valeur de la zone de saisie du type de date au contenu affiché dans la balise li.

③ v-on:click="nom de la fonction"

Cette fonction se déclenche lorsque vous cliquez dessus, vous pouvez ajouter () ou non, $index est utilisé comme paramètre pour représenter l'index et la valeur de l'index commencent à 0.

④ v-for

La liaison bidirectionnelle sera mise à jour en temps réel après la mise à jour du contenu du tableau, tout comme

; similaire à l'instruction for in, et est Ce qui est utilisé plusieurs fois est

⑤ v-on: event

est l'événement déclenché, y compris le clic (clic), la pression sur une touche (touche appuyez)

événement Il peut être suivi d'informations plus spécifiques, telles que keypress.enter est un retour chariot, keypress.space est un espace, etc.

Voir plus si nécessaire

⑥ new vue

Passez une nouvelle instance de vue, puis passez un objet en paramètre à cette instance

où :

el représente la limite ; modèle (seul le premier lié sera mis en correspondance)

data représente des données et peut être utilisé directement, par exemple, utilisé dans v-model ou {{variable name}}

methods représente. méthodes

⑦ La variable

est appelée à l'intérieur de la fonction via ce nom de variable, par exemple :

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 !