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

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?

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 .

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/

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>

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

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>