Vue.js — Perbedaan antara v-model dan v-bind

Saya belajar Vue dengan kursus online dan instruktur memberi saya latihan untuk membuat teks input dengan nilai default. Saya menyelesaikannya menggunakan model-v tetapi, instruktur memilih v-bind: value dan saya tidak mengerti mengapa.

Bisakah seseorang memberi saya penjelasan sederhana tentang perbedaan antara keduanya dan kapan lebih baik menggunakan masing-masing?

Dari sini - Ingat:

<input v-model="something">

pada dasarnya sama dengan:

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

atau (sintaks singkatan):

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

Jadi v-modeladalah pengikatan dua arah untuk input formulir . Ini menggabungkan v-bind, yang membawa nilai js ke markup, dan v-on:inputuntuk memperbarui nilai js .

Gunakan v-modelsaat Anda bisa. Gunakan v-bind/ v-onketika Anda harus :-) Saya harap jawaban Anda diterima.

v-model bekerja dengan semua jenis input HTML dasar (teks, textarea, angka, radio, kotak centang, pilih). Anda dapat menggunakan v-modeldengan input type=datejika model Anda menyimpan tanggal sebagai string ISO (yyyy-mm-dd). Jika Anda ingin menggunakan objek tanggal dalam model Anda (ide yang bagus segera setelah Anda akan memanipulasi atau memformatnya), lakukan ini .

v-modelmemiliki beberapa kecerdasan ekstra yang perlu diperhatikan. Jika Anda menggunakan IME (banyak keyboard ponsel, atau Cina / Jepang / Korea), v-model tidak akan diperbarui sampai kata selesai (spasi dimasukkan atau pengguna meninggalkan bidang). v-inputakan menembak lebih sering.

v-modeljuga memiliki pengubah .lazy, .trim, .number, tercakup dalam doc .

Dengan kata sederhana v-modeladalah untuk binding dua arah artinya: jika Anda mengubah nilai input, data yang terikat akan diubah dan sebaliknya .

tetapi v-bind:valuedisebut pengikatan satu arah yang berarti: Anda dapat mengubah nilai input dengan mengubah data terikat tetapi Anda tidak dapat mengubah data terikat dengan mengubah nilai input melalui elemen .

lihat contoh sederhana ini: https://jsfiddle.net/gs0kphvc/

v-model
itu adalah pengikatan data dua arah, digunakan untuk mengikat elemen input html ketika Anda mengubah nilai input maka data yang dibatasi akan berubah.

v-model hanya digunakan untuk elemen input HTML

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

v-bind
itu adalah pengikatan data satu arah, berarti Anda hanya dapat mengikat data ke elemen input tetapi tidak dapat mengubah data terikat mengubah elemen input. v-bind digunakan untuk mengikat atribut html
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/

Semoga ini bisa membantu Anda dengan pemahaman dasar

Ada beberapa kasus di mana Anda tidak ingin menggunakannya v-model. Jika Anda memiliki dua input, dan masing-masing bergantung satu sama lain, Anda mungkin memiliki masalah referensi melingkar. Kasing penggunaan umum adalah jika Anda sedang membuat kalkulator akuntansi.

Dalam kasus ini, tidak baik menggunakan pengamat atau properti yang dihitung.

Alih-alih, ambil v-modeldan pisahkan seperti yang ditunjukkan jawaban di atas

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

Dalam praktiknya, jika Anda memisahkan logika Anda dengan cara ini, Anda mungkin akan memanggil metode.

Ini akan terlihat seperti dalam skenario dunia nyata:

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