Directives a cikin Vue.js: Amfani da Misalai

Directives a cikin Vue.js yana ba ku damar amfani da halaye na musamman ga abubuwa a cikin DOM. An tsara su tare da v- syntax kuma ana amfani da su don sarrafa DOM, sarrafa abubuwan da suka faru, abubuwan da aka tsara, da ƙari. Vue.js yana ba da abubuwan ginannun da yawa directives kamar, da, waɗanda ke rufe ɗimbin abubuwan amfani gama gari. v-if v-for v-bind v-on

Ga wasu gama-gari directives a cikin Vue.js:

 

1. Umarni: Ana amfani da wannan umarnin don samar da wani abu bisa sharadi. v-if

Misali:

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

 

2. Umarni: Ana amfani da wannan umarnin don ƙirƙira kan tsararru ko wani abu da ƙirƙirar abubuwa masu dacewa. v-for

Misali:

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

 

3. Umarni: Ana amfani da wannan umarnin don ɗaure ƙimar magana zuwa sifa ko kadara ta wani abu. v-bind

Misali:

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

 

4. Umarni: Ana amfani da wannan umarnin don saurare da kuma gudanar da abubuwan da suka faru akan wani abu. v-on

Misali:

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

 

5. Umarni: Wannan umarnin yana haifar da haɗin kai ta hanyoyi biyu tsakanin abun shigar da kayan bayanai. v-model

Misali:

<input v-model="message">

 

Waɗannan su ne kawai wasu asali directives a cikin Vue.js. Hakanan kuna iya ƙirƙirar al'adarku directives don aiwatar da takamaiman halaye a cikin aikace-aikacen ku na Vue.js.