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

208

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?

Gustavo Dias
sumber
8
v-modeldigunakan terutama untuk penawaran dan penawaran bentuk, jadi gunakan itu ketika Anda berurusan dengan berbagai jenis input. v-binddirektif memungkinkan Anda untuk menghasilkan beberapa nilai dinamis dengan mengetik beberapa ekspresi JS yang dalam banyak kasus tergantung pada data dari model data - jadi pikirkan tentang v-bind sebagai arahan yang harus Anda gunakan ketika Anda ingin berurusan dengan beberapa hal dinamis.
Belmin Bedak
5
Dalam beberapa kasus, Anda dapat menggunakannya masing-masing. Terkadang tidak, misalnya: <div v-bind:class="{ active: isActive }"></div>- Anda tidak dapat mengikat atribut html menggunakan model, Anda harus menggunakan v-binddirektif. Untuk elemen formulir, Anda akan ingin menggunakan v-modelarahan - "itu secara otomatis memilih cara yang benar untuk memperbarui elemen berdasarkan pada tipe input."
Alexander
1
@Alexander Ungkapan "mengikat atribut HTML" membantu saya berpikir tentang ini lebih baik. Akan lebih baik melihat Anda mempertimbangkan hal ini dengan jawaban yang lebih lengkap tentang apa yang sebenarnya terjadi dengan kedua konstruksi ini.
Tom Russell
@Alexander Esp dalam konteks komponen datadan props...
Tom Russell

Jawaban:

429

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 .

bbsimonbb
sumber
33
'Gunakan v-model saat Anda bisa. Gunakan v-bind / v-on saat Anda harus '. Ringkasan hebat! Terima kasih banyak!
尤川豪
Apa perbedaan antara v-modeldan v-bind:xxx.sync?
El Mac
2
@ElMac v-model adalah pengikatan dua arah antara komponen Vue dan model javascript. Sumber (sisi model pengikatan) dideklarasikan dalam data komponen Vue. Seperti ini, Vue memungkinkan Anda mengekstrak status dari komponen Anda, lalu memodifikasi status ini langsung dari komponen. Ini adalah pola sederhana untuk manajemen negara yang merupakan ciri khas Vue (sulit / tersembunyi / tidak mungkin / tidak disarankan dalam Angular dan React). v-bind: xxx.sync adalah pengikatan dua arah antara komponen Vue dan induknya]. Status tetap dirangkum. Itu 'milik' orang tua. Ini belum tentu lebih baik!
bbsimonbb
45

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/

Madmadi
sumber
'jika Anda mengubah nilai input, data yang diikat akan diubah dan sebaliknya. '- tidak dapat memahami bagian' sebaliknya 'bahkan dari contoh biola. bisakah kamu menjelaskannya?
Istiaque Ahmed
jika Anda mengubah nilai input melalui elemen, data terikat akan berubah dan juga jika Anda mengubah data terikat melalui misalnya API Vue, nilai elemen input Anda akan berubah.
Madmadi
bagaimana cara mengubah data terikat melalui Vue API?
Istiaque Ahmed
Dalam contoh biola, katakanlah kita memiliki metode yang mengubah data_source seperti inithis.data_source = 'Some new value'
Madmadi
oleh data_source, Anda berarti HTML disuntikkan di DOM dari input, kan?
Istiaque Ahmed
3

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>
Prashant Gurav
sumber
'v-model itu adalah pengikatan data dua arah': apa dua cara itu secara khusus?
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/

Semoga ini bisa membantu Anda dengan pemahaman dasar

sda87
sumber
1

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>

Vincent Tang
sumber