Directives katika Vue.js: Matumizi na Mifano

Directives katika Vue.js hukuruhusu kutumia tabia maalum kwa vipengele katika DOM. Huwekwa kiambishi awali na v- sintaksia na hutumika kuendesha DOM, kushughulikia matukio, kutoa vipengele kwa masharti, na zaidi. Vue.js hutoa kadhaa zilizojengwa ndani directives kama vile, na, ambazo hushughulikia anuwai ya kesi za matumizi ya kawaida. v-if v-for v-bind v-on

Hapa kuna baadhi ya kawaida directives katika Vue.js:

 

1. Maelekezo: Maagizo haya yanatumika kwa masharti kutoa kipengele kulingana na hali. v-if

Mfano:

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

 

2. Maelekezo: Maagizo haya hutumika kurudia juu ya safu au kitu na kuunda vipengele vinavyolingana. v-for

Mfano:

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

 

3. Maelekezo: Maagizo haya yanatumika kuunganisha thamani ya usemi kwa sifa au sifa ya kipengele. v-bind

Mfano:

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

 

4. Maagizo: Maagizo haya hutumika kusikiliza na kushughulikia matukio kwenye kipengele. v-on

Mfano:

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

 

5. Maelekezo: Maagizo haya yanaunda uunganishaji wa njia mbili kati ya kipengele cha ingizo na sifa ya data. v-model

Mfano:

<input v-model="message">

 

Haya ni baadhi tu ya msingi directives katika Vue.js. Unaweza pia kuunda desturi yako mwenyewe directives ili kutekeleza tabia maalum katika programu yako ya Vue.js.