Vue.js — v-model ve v-bind arasındaki fark

Vue'yu çevrimiçi bir kursla öğreniyorum ve eğitmen bana varsayılan değeri olan bir giriş metni yapma alıştırması verdi. Bunu v-model kullanarak tamamladım, ancak eğitmen v-bind: value'i seçti ve nedenini anlamıyorum.

Birisi bana bu ikisi arasındaki farkı ve her birini daha iyi kullandığında basit bir açıklama yapabilir mi?

Gönderen burada - Hatırla:

<input v-model="something">

aslında aynıdır:

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

veya (stenografi sözdizimi):

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

Yani v-modelbir olan formu girişleri için bağlayıcı iki yönlü . O birleştirir v-bindhangi bir js değerini getirir biçimlendirme içine ve v-on:inputkarşı js değerini güncellemek .

Yapabildiğiniz v-modelzaman kullanın . Kullanın v-bind/ v-ongerektiğinde :-) Umarım cevabınız kabul edilir.

v-model tüm temel HTML giriş türleriyle (metin, metin alanı, sayı, radyo, onay kutusu, seçme) çalışır. Sen kullanabilirsiniz v-modelile input type=dateeğer ISO dizeleri (yyyy-aa-gg) olarak modeliniz saklar tarihleri. Modelinizde tarih nesnelerini kullanmak istiyorsanız (bunları değiştirir veya biçimlendirir değiştirmez iyi bir fikir), bunu yapın .

v-modelfarkında olmak iyi bazı akıllılar var. IME (çok sayıda mobil klavye veya Çince / Japonca / Korece) kullanıyorsanız, v-modeli bir sözcük tamamlanana kadar (bir boşluk girilen veya kullanıcı alandan ayrılana kadar) güncellenmez. v-inputçok daha sık ateş edecek.

v-modelAyrıca değiştiriciler vardır .lazy, .trim, .number, kaplı doc .

Basit bir deyişle v-model, iki yönlü ciltleme anlamına gelir: giriş değerini değiştirirseniz, bağlı veriler değiştirilir veya tersi de geçerlidir .

ancak tek yönlü ciltlemev-bind:value olarak adlandırılır, bunun anlamı şudur: ilişkili verileri değiştirerek giriş değerini değiştirebilirsiniz, ancak öğe aracılığıyla giriş değerini değiştirerek ilişkili verileri değiştiremezsiniz .

şu basit örneği inceleyin: https://jsfiddle.net/gs0kphvc/

v-model
iki yönlü veri bağlamasıdır, giriş değerini değiştirdiğinizde html giriş elemanını bağlamak için kullanılır, daha sonra sınırlı veriler değişecektir.

v-modeli yalnızca HTML giriş öğeleri için kullanılır

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

v-bind
tek yönlü veri bağlamasıdır, verileri giriş elemanına sadece bağlayabileceğiniz, ancak sınırlı veri değiştiren giriş elemanını değiştiremeyeceğiniz anlamına gelir. v-bind, html özniteliğini
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/

Umarım bu temel anlayışa yardımcı olur

Kullanmak istemediğiniz durumlar var v-model. İki girişiniz varsa ve her biri birbirine bağlıysa, döngüsel başvuru sorunlarınız olabilir. Genel kullanım durumları, bir muhasebe hesap makinesi oluşturuyorsanız.

Bu gibi durumlarda, izleyici veya hesaplanmış mülk kullanmak iyi bir fikir değildir.

Bunun yerine, v-modelcevabınızı alın ve yukarıdaki yanıtın belirttiği gibi bölün

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

Pratikte, mantığınızı bu şekilde ayırıyorsanız, muhtemelen bir yöntem çağırırsınız.

Gerçek dünya senaryosunda böyle görünecektir:

<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>