Penjelasan terperinci tentang cara menggunakan arahan model-v dalam dokumentasi Vue

Vue ialah rangka kerja bahagian hadapan yang popular Salah satu ciri terasnya ialah kemas kini data yang responsif, memudahkan pembangun mengurus dan menyelenggara antara muka pengguna. Sebagai ciri penting Vue, arahan model-v boleh merealisasikan pengikatan data dua hala dengan lebih mudah, menjadikan antara muka pengguna lebih fleksibel dan lebih mudah digunakan. Mari kita lihat dengan lebih dekat cara menggunakan arahan model-v dalam dokumentasi Vue.

1. Konsep model v

Arahan model v boleh merealisasikan pengikatan data dua hala, iaitu, menyegerakkan input data oleh pengguna kepada model, dan juga menyegerakkan data dalam model ke Dalam paparan, ia adalah salah satu ciri penting dalam rangka kerja Vue. Pelaksanaannya adalah seperti berikut:

1 Ikat pada elemen kotak input

Arahan model v dibina pada elemen input borang Vue, termasuk kotak input (teks, kata laluan, nombor, dsb.), butang radio (radio), kotak semak (kotak semak) dan kotak lungsur (pilih), dsb. Penggunaannya adalah seperti berikut:

<input type="text" v-model="message">

Kod di atas mengikat pembolehubah mesej ke kotak input pengguna dengan mengikat arahan model v untuk mencapai pengikatan dua hala.

2. Ikat pada komponen tersuai

Selain elemen input bentuk asli, Vue juga menyediakan komponen tersuai yang menyokong arahan model-v. Komponen ini menggunakan pilihan model untuk memetakan nilai dalaman kepada prop, dan hanya menukar nilai dalaman ini apabila peristiwa input menyala. Kod sampel adalah seperti berikut:

Vue.component('my-component', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

Apabila mentakrifkan komponen, anda perlu mengisytiharkan pilihan props supaya arahan model-v boleh mengikat pembolehubah nilai kepada komponen. Cetuskan peristiwa input dalam fungsi $emit komponen dan hantar nilai yang dimasukkan oleh pengguna kepada contoh komponen untuk mencapai pengikatan dua hala.

2. Penggunaan v-model

1. Input teks

Arahan model v boleh diikat pada elemen kotak input teks untuk mencapai kemas kini segerak. Sebagai tambahan kepada kotak teks satu baris biasa, Vue juga menyokong pengikatan kawasan teks kotak input teks berbilang baris, seperti yang ditunjukkan di bawah:

<input type="text" v-model="message"> 
 

Untuk butang radio dan kotak semak, model v mengikat keadaan yang dipilih ( benar atau salah), seperti yang ditunjukkan di bawah:

<input type="checkbox" v-model="checked">

2 Butang radio

Menggunakan arahan model-v untuk mengikat kotak butang radio memerlukan nilai yang sepadan dengan pilihan, seperti yang ditunjukkan. di bawah:

<input type="radio" v-model="picked" value="a">
<input type="radio" v-model="picked" value="b">

Model v dalam kod di atas terikat pada pembolehubah yang dipilih Nilai setiap butang radio sepadan dengan nilai pilihan. Nilai pembolehubah yang dipilih juga akan dikemas kini apabila berbeza pilihan dipilih.

3. Kotak Semak

Gunakan arahan model v untuk mengikat kotak pilihan kepada pembolehubah jenis Boolean, seperti yang ditunjukkan di bawah:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Kompleks Keadaan kotak semak yang dipilih terikat pada pembolehubah jenis Boolean, dan {{ checked }} terikat pada nilai pembolehubah.

4. Kotak lungsur

Kotak lungsur turun juga menyokong pengikatan melalui arahan model-v, seperti yang ditunjukkan di bawah:

<select v-model="selected">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

Terikat model-v dalam kod di atas ialah Pembolehubah yang dipilih sepadan dengan nilai setiap pilihan dalam kotak lungsur.

3. Pengubah suai v-model

Pengubah suai ialah simbol sambungan yang digunakan selepas arahan v-model untuk menukar tingkah laku lalai model-v. Vue menyediakan berbilang pengubah suai, yang diterangkan satu demi satu di bawah:

1.lazy

Secara lalai, arahan model v ialah pengikatan dua hala yang dicetuskan oleh peristiwa input, iaitu , setiap Setiap input akan mengemas kini data kepada model, dan pengubah suai malas akan menukar tingkah laku ini kepada peristiwa perubahan, yang akan membolehkan model v menyegerakkan data kepada model hanya dalam acara kabur Kod sampel adalah seperti berikut :

<input type="text" v-model.lazy="message">

2.number

Untuk arahan model-v dengan pengubah suai "nombor", Vue secara automatik akan menukar input kepada jenis Nombor Kod sampel adalah seperti berikut:

<input type="text" v-model.number="message">

3.trim

Arahan model v dengan pengubah suai "trim" secara automatik akan menapis aksara kosong di hadapan dan di belakang yang dimasukkan oleh pengguna Kod sampel adalah seperti berikut:

<input type="text" v-model.trim="message">

4. Prinsip model v

Prinsip pelaksanaan arahan model v adalah menggunakan teknologi rampasan data Apabila atribut nilai kotak input pengguna berubah, model v akan memantau menukar dan menyegerakkan perubahan kepada model Pada masa yang sama, ia juga akan Perubahan disegerakkan kepada paparan. Kaedah pelaksanaan khusus adalah seperti berikut:

1 Data Hijack

Rangka kerja Vue merampas data melalui kaedah Object.defineProperty Apabila pembolehubah model dibaca, kaedah get akan dicetuskan; dan apabila pembolehubah model diberikan nilai, kaedah yang ditetapkan akan dicetuskan dalam kaedah yang ditetapkan, nilai model dikemas kini dan pemberitahuan kemas kini data dicetuskan.

2. Pantau DOM kotak input pengguna

Apabila nilai kotak input pengguna berubah, peristiwa input akan dicetuskan selepas menerima peristiwa input, arahan model-v akan Nilai yang dimasukkan oleh pengguna disegerakkan ke dalam model.

3. Maklumkan model

Apabila nilai model berubah, arahan model-v akan menghantar nilai baharu kepada elemen borang yang terikat pada arahan untuk mengemas kini antara muka pengguna.

5. Ringkasan

Arahan model v ialah salah satu ciri penting dalam rangka kerja Vue dan memainkan peranan teras dalam pengikatan dua hala data borang. Melalui penggunaan model-v, kecekapan pembangunan dan kebolehselenggaraan kod boleh dipertingkatkan dalam pembangunan Vue. Pada masa yang sama, menguasai pengubah suai dan prinsip model v akan membantu anda memahami dengan lebih baik mekanisme pengendalian rangka kerja Vue dan meningkatkan kemahiran pembangunan bahagian hadapan anda.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan arahan model-v dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!