Vue.js - Unterschied zwischen V-Modell und V-Bindung

208

Ich lerne Vue mit einem Online-Kurs und der Kursleiter gab mir eine Übung, um einen Eingabetext mit einem Standardwert zu erstellen. Ich habe es mit v-model abgeschlossen, aber der Kursleiter hat v-bind: value gewählt und ich verstehe nicht warum.

Kann mir jemand eine einfache Erklärung über den Unterschied zwischen diesen beiden geben und wann es besser ist, jeden einzelnen zu verwenden?

Gustavo Dias
quelle
8
v-modelwird hauptsächlich für Eingabe- und Formulargebote verwendet. Verwenden Sie es daher, wenn Sie mit verschiedenen Eingabetypen arbeiten. v-bindMit der Direktive können Sie einen dynamischen Wert erzeugen, indem Sie einen JS-Ausdruck eingeben, der in den meisten Fällen von den Daten aus dem Datenmodell abhängt. Stellen Sie sich also v-bind als Direktive vor, die Sie verwenden sollten, wenn Sie sich mit einigen dynamischen Dingen befassen möchten.
Belmin Bedak
5
In einigen Fällen können Sie jeden von ihnen verwenden. Manchmal nicht, zum Beispiel: <div v-bind:class="{ active: isActive }"></div>- Sie können das HTML-Attribut nicht mit dem Modell binden, Sie sollten die v-bindDirektive verwenden. Für die Elemente des Formulars sollten Sie die v-modelDirektive verwenden - "Sie wählt automatisch den richtigen Weg aus, um das Element basierend auf dem Eingabetyp zu aktualisieren."
Alexander
1
@Alexander Der Ausdruck "HTML-Attribut binden" hat mir geholfen, besser darüber nachzudenken. Es wäre schön zu sehen, dass Sie dies mit einer vollständigeren Antwort darüber abwägen, was tatsächlich mit diesen beiden Konstrukten passiert.
Tom Russell
@ Alexander Esp im Zusammenhang mit Komponente dataund props...
Tom Russell

Antworten:

428

Von hier aus - Denken Sie daran:

<input v-model="something">

ist im Wesentlichen das gleiche wie:

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

oder (Kurzsyntax):

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

Dies v-modelgilt auch für die bidirektionale Bindung von Formulareingaben . Es kombiniert v-bind, die einen js Wert bringt in das Markup und v-on:inputzu dem js Wert zu aktualisieren .

Verwenden v-modelSie, wenn Sie können. Benutze v-bind/ v-onwenn du musst :-) Ich hoffe deine Antwort wurde akzeptiert.

v-model funktioniert mit allen grundlegenden HTML-Eingabetypen (Text, Textbereich, Nummer, Radio, Kontrollkästchen, Auswahl). Sie können v-modelmit verwenden, input type=datewenn Ihr Modell Datumsangaben als ISO-Zeichenfolgen (JJJJ-MM-TT) speichert. Wenn Sie Datumsobjekte in Ihrem Modell verwenden möchten (eine gute Idee, sobald Sie sie bearbeiten oder formatieren möchten), tun Sie dies .

v-modelhat einige zusätzliche Smarts, die es gut ist, sich dessen bewusst zu sein. Wenn Sie einen IME verwenden (viele mobile Tastaturen oder Chinesisch / Japanisch / Koreanisch), wird das V-Modell erst aktualisiert, wenn ein Wort vollständig ist (ein Leerzeichen wird eingegeben oder der Benutzer verlässt das Feld). v-inputwird viel häufiger feuern.

v-modelauch Modifikatoren hat .lazy, .trim, .number, in bedeckt doc .

bbsimonbb
quelle
33
Verwenden Sie das V-Modell, wenn Sie können. Verwenden Sie v-bind / v-on, wenn Sie müssen '. Tolle Zusammenfassung! Vielen Dank!
4.
Was ist der Unterschied zwischen v-modelund v-bind:xxx.sync?
El Mac
2
@ ElMac v-model ist eine bidirektionale Bindung zwischen einer Vue-Komponente und einem Javascript-Modell. Die Quelle (die Modellseite der Bindung) wird in den Daten der Vue-Komponente deklariert. Auf diese Weise können Sie mit Vue den Status aus Ihren Komponenten extrahieren und diesen Status dann direkt aus der Komponente ändern. Es ist ein einfaches Muster für das Staatsmanagement, das ein Markenzeichen von Vue ist (schwierig / versteckt / unmöglich / entmutigt in Angular and React). v-bind: xxx.sync ist eine bidirektionale Bindung zwischen einer Vue-Komponente und ihrem übergeordneten Element. Der Zustand bleibt gekapselt. Es gehört dem Elternteil. Das ist nicht unbedingt besser!
Bbsimonbb
45

In einfachen Worten bedeutet v-modelfür zwei Wege Bindungen : Wenn Sie den Eingabewert ändern, werden die gebundenen Daten geändert und umgekehrt .

Dies v-bind:valuewird jedoch als Einwegbindung bezeichnet. Dies bedeutet: Sie können den Eingabewert ändern, indem Sie gebundene Daten ändern, aber Sie können gebundene Daten nicht ändern, indem Sie den Eingabewert über das Element ändern .

Schauen Sie sich dieses einfache Beispiel an: https://jsfiddle.net/gs0kphvc/

Madmadi
quelle
'Wenn Sie den Eingabewert ändern, werden die gebundenen Daten geändert und umgekehrt. '- kann den Teil' umgekehrt 'nicht einmal aus dem Geigenbeispiel verstehen. kannst du es erklären ?
Istiaque Ahmed
Wenn Sie den Eingabewert über das Element ändern, werden die gebundenen Daten geändert. Wenn Sie die gebundenen Daten beispielsweise über Vue-APIs ändern, ändert sich auch der Wert des Eingabeelements.
Madmadi
Wie ändere ich gebundene Daten über die Vue-API?
Istiaque Ahmed
Angenommen, wir haben eine Methode, mit der data_source wie this.data_source = 'Some new value'
folgt
Damit data_sourcemeinen Sie den HTML-Code, der in DOM eingefügt wurde input, oder?
Istiaque Ahmed
3

V-Modell
Es handelt sich um eine bidirektionale Datenbindung. Es wird zum Binden des HTML-Eingabeelements verwendet, wenn Sie den Eingabewert ändern. Dann werden die begrenzten Daten geändert.

Das v-Modell wird nur für HTML-Eingabeelemente verwendet

ex: <input type="text" v-model="name" > 

v-bind
ist eine Einweg-Datenbindung. Dies bedeutet, dass Sie nur Daten an ein Eingabeelement binden können, aber keine begrenzten Daten ändern können, indem Sie das Eingabeelement ändern. v-bind ist zu binden HTML - Attribut verwendet
ex:
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>
Prashant Gurav
quelle
"V-Modell, es ist eine Zwei-Wege-Datenbindung": Was sind diese beiden Wege konkret?
Istiaque Ahmed
2
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

Hoffe das hilft dir beim Grundverständnis

sda87
quelle
1

Es gibt Fälle, in denen Sie nicht verwenden möchten v-model. Wenn Sie zwei Eingänge haben und jeder voneinander abhängig ist, können zirkuläre Referenzprobleme auftreten. Häufige Anwendungsfälle sind, wenn Sie einen Buchhaltungsrechner erstellen.

In diesen Fällen ist es keine gute Idee, entweder Beobachter oder berechnete Eigenschaften zu verwenden.

Nehmen Sie stattdessen Ihre v-modelund teilen Sie sie wie oben angegeben auf

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

In der Praxis rufen Sie wahrscheinlich eine Methode auf, wenn Sie Ihre Logik auf diese Weise entkoppeln.

So würde es in einem realen Szenario aussehen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>

Vincent Tang
quelle