Avant-propos
De nombreux étudiants qui utilisent Vue sont souvent les instructions les plus faciles à ignorer. Étant donné que de nombreux étudiants qui sont débutants et n'ont même pas commencé à contacter Vue sont considérés ici, avant d'introduire v-clos, j'utiliserai le modèle v bien connu pour écrire une petite démo.
modèle en V
Je crois que vous n'êtes pas familier avec le modèle en V. En bref, il est utilisé pour créer une liaison de données bidirectionnelle sur les contrôles et les composants de formulaire.
Tout d'abord, nous construisons un petit environnement Vue et introduisons Vue.js dans une page html.
Voici une petite châtaigne pour vous :
<body>
<div id="app">
<input type="text" v-model="message"><br>
这里是文本框输入的值——{
{
message}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
},
})
</script>
Le résultat de l'exécution d'un exemple très simple ne fait aucun doute !
Ci-dessous, nous voyons la relation bidirectionnelle plus directement
1. Nous modifions les données dans le modèle en allant sur la console
Nous pouvons constater que nous modifions la valeur du message dans le modèle, et la valeur dans la vue change en conséquence
2. Nous visualisons les changements dans le modèle en modifiant la valeur dans la vue dans la zone de texte
Nous avons constaté que lorsque nous modifions la valeur dans la zone de texte Afficher à travers la zone de texte, la valeur de notre modèle changeait également.
Résumé
À travers l'exemple ci-dessus, avez-vous une meilleure compréhension de la liaison bidirectionnelle de Vue, car nous ne pouvons modifier les données de View qu'à travers des éléments de formulaire, bien sûr, nos autres éléments de formulaire sont également possibles, nous ne serons pas différents une énumération ;
modificateur de modèle en V
1..lazy
Nous pouvons voir dans l'animation ci-dessus que la zone de texte liée par v-model sera mise à jour avec les données du modèle tant que la valeur de la zone de texte change. Dans de nombreux cas, nous pouvons implémenter une certaine fonction de manière cohérente, mais affectera nos performances, nous utilisons donc un .lazymodificateur
qui nous aidera à synchroniser la valeur de la zone de texte avec le modèle lorsque notre zone de texte perd le focus
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
<input type="text" v-model.lazy="message">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
},
})
</script>
Jetez un oeil à l'effet
2..number
Nous prenons toujours la zone de texte comme exemple. Plusieurs fois, nous avons besoin de certaines valeurs à remplir par l'utilisateur, et cette valeur peut être supposée être un nombre à calculer. À l'heure actuelle, de nombreux étudiants pensent à de nombreuses façons, conversion, entrée pour juger, etc., mais en fait, il existe un modificateur dans v-model qui peut nous aider à répondre à cette exigence
Voyons cela à travers une petite châtaigne. Tout d'abord, nous voulons entrer une valeur dans chacune des deux zones de texte et nous allons la résumer
. Vous pouvez regarder le résultat.
Nous pouvons voir que ce n'est pas le résultat que nous voulons, c'est un épissage au lieu d'une sommation, puis nous ajoutons le modificateur .number pour l'essayer
<body>
<div id="app">
<h3>我是求和——{
{
num1+num2}}</h3>
<input type="text" v-model.number="num1">
<input type="text" v-model.number="num2">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
num1: '',
num2: '',
},
})
</script>
Voyons les résultats
3..trim
Celui-ci devrait être familier à tout le monde. Il est plus utilisé, c'est-à-dire pour supprimer les espaces, mais il ne supprimera les espaces qu'aux deux extrémités de la zone de texte et ne supprimera pas les espaces au milieu.
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
<input type="text" v-model.trim="message">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
},
})
</script>
voir l'effet
bon sens:
En fait, le modèle en V lié à la zone de texte ici n'est que du sucre syntaxique. L'attribut value et l'événement d'entrée sont utilisés pour compléter la liaison bidirectionnelle. Lorsque la valeur de la zone de texte change, nous déclenchons l'événement d'entrée pour changer la valeur que nous lions. En même temps, la valeur de notre zone de texte est également liée au message
v-manteau
Que fait exactement ce v-cloak, regardons d'abord le code suivant
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好几何心凉',
},
})
</script>
Ensuite, nous avons constaté que lorsque la page est rendue, le moment suivant apparaît
et clignote immédiatement
Ce phénomène se produit dans notre processus de développement actuel, en particulier lorsque l'état de notre réseau n'est pas très bon ou que la réponse de l'interface back-end est relativement lente, nous utilisons donc notre v-cloak
. En fait, son principe est display:none everyone It doit être compris, c'est-à-dire que l'élément Dom est masqué avant que la variable liée à nos données ait une valeur, de sorte que le problème ci-dessus ne se produira pas.
