Tutoriel avancé Vue : explication détaillée du modèle V

Partager

L'explication sur v-model sur le tutoriel du site officiel de Vue n'est pas très détaillée Le but de la rédaction de cet article est de l'analyser en détail, de présenter les améliorations de Vue 2.2 v-model, puis intercalez-le. Parlons d'un peu de connaissances sur Vue.

Dans Vue, il existe de nombreuses méthodes similaires à Angular, principalement parce qu'Angular a été la source d'inspiration pour les premiers développements de Vue. Cependant, de nombreux problèmes dans Augular ont été résolus dans Vue.

---

Lorsque le modèle v est utilisé sur des éléments d'entrée

v-modelBien qu'il soit très similaire au ng-model d'Angular qui utilise la liaison de données bidirectionnelle, Vue est un système de données unique flow. v-model n'est que du sucre syntaxique : ↓

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

La première ligne de code n'est en fait que du sucre syntaxique pour la deuxième ligne. Ensuite, la deuxième ligne de code peut être abrégée comme ceci : ↓

<input :value="sth" @input="sth = $event.target.value" />

Pour comprendre cette ligne de code, vous devez d'abord savoir que l'élément input lui-même a un événement oninput, qui est nouvellement ajouté en HTML5, similaire à onchange , chaque fois que le contenu de la zone de saisie change, il déclenchera oninput et transmettra le dernier value à sth.
Si vous ne savez pas d'où vient $event, vous devez cliquer dessus et consulter la documentation.

Nous observons attentivement les deux lignes de code du sucre de syntaxe et de la syntaxe originale, et nous pouvons tirer une conclusion :

Lors de l'ajout de l'attribut v-model à l'élément 73a3ca28445b1c625f2086a50cb8c7df , l'attribut v-model sera ajouté par défaut comme attribut de l'élément, puis utilisera l'événement 'input' comme événement déclencheur pour la livraison de la valeur en temps réel

---

Lorsque v- le modèle est utilisé sur un composant

v-model peut non seulement être utilisé dans input peut également être utilisé sur des composants Ce qui suit est un exemple similaire au didacticiel du site officiel de Vue (nous devons considérer deux problèmes. en regardant cet exemple) :

Exemple demonstration.gif

La valeur initiale du price du composant parent est 100. Changer le La valeur du composant enfant peut mettre à jour celle du composant parent price

<div id="demo">  <currency-input v-model="price"></currentcy-input>  <span>{{price}}</span></div><script src="https://cdn.bootcss.com/vue/2.3.0/vue.js?1.1.11"></script><script>Vue.component(&#39;currency-input&#39;, {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
        @input="$emit(&#39;input&#39;, $event.target.value)"
      >
    </span>
  `,
  props: [&#39;value&#39;],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})var demo = new Vue({
  el: &#39;#demo&#39;,
  data: {
    price: 100,
  }
})</script>

---

Si vous connaissez les réponses à ces deux questions, alors félicitations, vous maîtrisez vraiment

. Si vous ne comprenez pas, vous pouvez regarder ce code : ↓v-model

<currency-input v-model="price"></currentcy-input><!--上行代码是下行的语法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

Maintenant vous savez et

? Semblable à ce qui est résumé ci-dessus : valueinputLors de l'ajout de l'attribut v-model à un composant, la valeur sera utilisée comme attribut du composant par défaut, et la valeur 'input' sera utilisée comme événement nom lors de la liaison d'événements au composant

Inconvénients et solutions du v-model

---

Lors de la création de composants communs comme des cases à cocher ou des boutons radio,

n'est pas facile à utiliser.

v-model

<input type="checkbox" v-model="sth" />

nous fournit l'attribut

et l'événement v-model Cependant, ce dont nous avons besoin n'est pas l'attribut value, mais l'attribut oninput, et quand vous. cliquez dessus L'événement value ne sera pas déclenché lorsque le bouton radio est sélectionné, il déclenchera uniquement l'événement checked. C'est embarrassantoninput

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!