VueJs untuk Pemula Pengikatan Data Bahagian VueJs

Dalam blog/artikel sebelumnya, kami mempelajari cara mencipta, mengimport dan menggunakan komponen. Kali ini, kami akan meneroka pengikatan data dalam komponen.

Menggunakan Data dalam Komponen

Mentakrifkan Data dalam Komponen
Data ditakrifkan dalam fungsi data() dan dikembalikan sebagai objek.
Berikut ialah contoh:

data() {
  return {
    message: 'Hello World!'
  };
}

Mengikat dengan Arahan

v-bind: Ikat atribut HTML pada data.

<img v-bind:src="imageUrl" alt="Example Image">

v-model: Arahan model-v digunakan untuk pengikatan data dua hala pada input borang. Ia memastikan nilai input disegerakkan dengan data contoh Vue. Pada asasnya, v-model menggabungkan @input (yang mendengar perubahan) dan :value (yang menetapkan nilai input). Contohnya:

<input v-model="message" />

Ini bersamaan dengan:

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

Begini cara anda boleh menggunakan :value dan @input secara berasingan:

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

Arahan v-if secara bersyarat menjadikan elemen berdasarkan nilai boolean. Jika keadaan adalah benar, elemen akan diberikan; jika palsu, ia tidak akan. Contohnya:

<p v-if="isVisible">This is visible!</p>

Arahan v-for digunakan untuk menggelung melalui tatasusunan atau objek untuk memaparkan elemen. Setiap elemen boleh diberikan kunci unik untuk prestasi yang lebih baik. Contohnya:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-on
Arahan v-on digunakan untuk mendengar peristiwa pada elemen. Anda boleh menggunakan trengkas @ untuk kemudahan. Contohnya:

<button v-on:click="handleClick">Click me!</button>

Ini boleh dipendekkan kepada:

<button @click="handleClick">Click me!</button>

Atas ialah kandungan terperinci VueJs untuk Pemula Pengikatan Data Bahagian VueJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!