Directives dalam Vue.js: Penggunaan dan Contoh

Directives dalam Vue.js membolehkan anda menggunakan gelagat istimewa pada elemen dalam DOM. Ia diawali dengan v- sintaks dan digunakan untuk memanipulasi DOM, mengendalikan acara, memberikan elemen bersyarat dan banyak lagi. Vue.js menyediakan beberapa terbina dalam directives seperti, , dan, yang merangkumi pelbagai kes penggunaan biasa. v-if v-for v-bind v-on

Berikut ialah beberapa perkara biasa directives dalam Vue.js:

 

1. Arahan: Arahan ini digunakan untuk memberikan unsur secara bersyarat berdasarkan syarat. v-if

Contoh:

<div v-if="isShow">This element is only displayed if isShow is true.</div>

 

2. Arahan: Arahan ini digunakan untuk lelaran pada tatasusunan atau objek dan mencipta elemen yang sepadan. v-for

Contoh:

<ul>  
  <li v-for="item in items">{{ item }}</li>  
</ul>

 

3. Arahan: Arahan ini digunakan untuk mengikat nilai ungkapan kepada atribut atau sifat unsur. v-bind

Contoh:

<img v-bind:src="imageUrl">

 

4. Arahan: Arahan ini digunakan untuk mendengar dan mengendalikan peristiwa pada elemen. v-on

Contoh:

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

 

5. Arahan: Arahan ini mewujudkan pengikatan dua hala antara elemen input dan sifat data. v-model

Contoh:

<input v-model="message">

 

Ini hanyalah beberapa asas directives dalam Vue.js. Anda juga boleh membuat tersuai anda sendiri directives untuk melaksanakan gelagat tertentu dalam aplikasi Vue.js anda.