Prinsip pelaksanaan model v dalam vue

Vue ialah salah satu rangka kerja JavaScript bahagian hadapan yang paling popular hari ini. Konsep reka bentuk paparan dipacu datanya sangat praktikal dalam pembangunan. Untuk memudahkan pengikatan data paparan, Vue menyediakan arahan model v, yang melaluinya nilai elemen bentuk boleh terikat dua hala kepada data dalam contoh Vue. Walaupun arahan model-v sangat mudah digunakan, prinsip pelaksanaannya masih patut diterokai secara mendalam. Artikel ini akan memperkenalkan secara terperinci prinsip pelaksanaan model v dalam vue.

1. Peranan v-model

Fungsi utama arahan v-model dalam vue adalah untuk mengikat data borang kepada data dalam contoh vue secara dua hala , iaitu, pengguna dalam bentuk Selepas memasukkan data, nilai yang dimasukkan disegerakkan secara automatik dengan data dalam contoh vue. v-model digunakan terutamanya untuk elemen bentuk, termasuk input, textarea, pilih, dsb.

2. Penggunaan v-model

Menggunakan v-model, kita boleh mengikat elemen borang dengan mudah pada data dalam contoh Vue. Sebagai contoh, kod berikut melaksanakan kotak input dan pengikatan data:

<div id="app">
  <input type="text" v-model="message" />
  <p>{{message}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

Selepas kod ini dijalankan, masukkan sebarang aksara dalam kotak input dan nilai dalam kotak input akan dipaparkan di bawah.

3. Prinsip pelaksanaan model v

Prinsip pelaksanaan arahan model v dalam Vue sebenarnya dilaksanakan melalui beberapa kaedah menggabungkan peristiwa dan atribut yang mengikat.

1. Ikatan peristiwa input

Di bawah arahan model v, kita boleh menggunakan peristiwa tertentu untuk mengikat data. Dalam kes yang paling mudah, sebagai contoh, menggunakan v-model untuk mengikat kotak input teks, peristiwa terikat sebenar ialah peristiwa input. Dalam Vue, pelaksanaan kod adalah kira-kira seperti berikut:

input: function (el, value) {
    el.value = value == null ? '' : value;
    el.addEventListener('input', function (e) {
        value = e.target.value;
    });
    return function () {
        el.removeEventListener('input', function (e) {
            value = e.target.value;
        });
    }
}

Dalam kod di atas, el ialah elemen yang terikat dengan peristiwa Apabila arahan digunakan pada mulanya, el.value digunakan untuk menentukan sama ada kandungan kotak input berada dalam keadaan awal . Apabila peristiwa input dipantau, nilai terkini diberikan kepada pembolehubah nilai. Apabila komponen dimusnahkan, pendengar acara juga dialih keluar.

2. Bind prop

Pendengar peristiwa input hanya akan mengemas kini paparan dalam satu arah Di sini anda juga perlu mengikat prop untuk mengemas kini data untuk mencapai pengikatan dua hala . Dalam Vue, prop yang biasa digunakan termasuk nilai dan diperiksa. Dalam contoh kami, kerana kami perlu mengikat kotak input teks, kami mengikat atribut nilai di sini. Dalam Vue, kod dilaksanakan seperti berikut:

bindValue: function (el, prop, value) {
    if (prop === 'value') {
        el.value = value == null ? '' : value;
    }
    return function () {
        if (prop === 'value') {
           // do something 
        }
    }
}

Dalam kod di atas, prop ialah atribut yang digunakan untuk mewakili nilai tertentu dalam elemen bentuk Pada masa ini, kami biasanya menggunakan arahan v-bind untuk mengikat nilai kepadanya.

3. Ikatan acara kemas kini

Data Vue dikemas kini secara tidak segerak pada masa ini, data mungkin dikemas kini tetapi paparan tidak dikemas kini. Untuk mengelakkan situasi ini, selepas mengikat acara input dan prop, kami juga perlu melakukan beberapa acara kemas kini. Berikut ialah pelaksanaan dalam kod sumber vue:

update: function (el) {
    el.dispatchEvent(new Event('input'));
},

Fungsi fungsi ini adalah untuk "memaksa" mencetuskan peristiwa input pada elemen untuk mengemas kini paparan. Disebabkan oleh mekanisme peristiwa mengikat Vue, apabila data dalam kotak input berubah, peristiwa input akan dicetuskan terlebih dahulu Pada masa ini, pembolehubah nilai yang mendengar peristiwa input akan dikemas kini, dan pembolehubah ini serta data dalam Contoh Vue terikat antara satu sama lain, jadi Peristiwa input kemas kini mengemas kini data dalam tika Vue secara automatik.

4. Senario aplikasi model v

Dalam pembangunan sebenar, model v sangat praktikal dan boleh memudahkan jumlah kod kami. Ia sesuai untuk semua perpustakaan dan rangka kerja bahagian hadapan, dan model v juga digunakan secara meluas dalam vue. Apabila menggunakan v-model untuk mengikat data borang, kita boleh mendapatkan data borang terus dalam contoh Vue tanpa melalui API DOM. Pada masa yang sama, model v juga menyokong pelbagai jenis data kotak input dan nilai lalai, seperti kotak input kotak semak dan kotak input radio, yang sangat fleksibel. Sudah tentu, perlu diingatkan bahawa model-v hanya digunakan untuk elemen bentuk, bukan elemen HTML biasa.

5. Ringkasan

Dalam Vue, prinsip pelaksanaan arahan model v tidak rumit Ia boleh mencapai pengikatan data dua hala melalui beberapa kaedah mengikat peristiwa dan sifat. Senario aplikasi model v juga sangat luas dan statusnya memainkan peranan yang menentukan. Apabila menggunakan model-v, kita perlu memberi perhatian kepada skop aplikasinya dan pengikatan nilai lalai bagi elemen bentuk. Itu sahaja buat masa ini, saya harap ia dapat membantu semua orang.

Atas ialah kandungan terperinci Prinsip pelaksanaan model v dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!