Directives në Vue.js: Përdorimi dhe Shembujt

Directives në Vue.js ju lejon të aplikoni sjellje të veçanta për elementët në DOM. Ato janë të parashtesuara me v- sintaksë dhe përdoren për të manipuluar DOM-in, për të trajtuar ngjarjet, për të dhënë elemente me kusht dhe më shumë. Vue.js ofron disa të integruara directives si, dhe, të cilat mbulojnë një gamë të gjerë rastesh të përdorimit të zakonshëm. v-if v-for v-bind v-on

Këtu janë disa të zakonshme directives në Vue.js:

 

1. Direktiva: Kjo direktivë përdoret për të dhënë me kusht një element të bazuar në një kusht. v-if

Shembull:

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

 

2. Direktiva: Kjo direktivë përdoret për të përsëritur mbi një grup ose një objekt dhe për të krijuar elementë përkatës. v-for

Shembull:

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

 

3. Direktiva: Kjo direktivë përdoret për të lidhur vlerën e një shprehjeje me një atribut ose një veti të një elementi. v-bind

Shembull:

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

 

4. Direktiva: Kjo direktivë përdoret për të dëgjuar dhe trajtuar ngjarjet në një element. v-on

Shembull:

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

 

5. Direktiva: Kjo direktivë krijon një lidhje të dyanshme midis një elementi hyrës dhe një veçori të të dhënave. v-model

Shembull:

<input v-model="message">

 

Këto janë vetëm disa elemente directives në Vue.js. Ju gjithashtu mund të krijoni porosinë tuaj directives për të kryer sjellje specifike në aplikacionin tuaj Vue.js.