Directives i Vue.js: Bruk og eksempler

Directives i Vue.js lar deg bruke spesiell atferd på elementer i DOM. De er prefiks med syntaksen v- og brukes til å manipulere DOM, håndtere hendelser, betinget gjengi elementer og mer. Vue.js har flere innebygde directives som, og, som dekker et bredt spekter av vanlige brukstilfeller. v-if v-for v-bind v-on

Her er noen vanlige directives i Vue.js:

 

1. Direktiv: Dette direktivet brukes til å betinget gjengi et element basert på en betingelse. v-if

Eksempel:

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

 

2. Direktiv: Dette direktivet brukes til å iterere over en matrise eller et objekt og lage tilsvarende elementer. v-for

Eksempel:

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

 

3. Direktiv: Dette direktivet brukes til å binde verdien av et uttrykk til et attributt eller en egenskap til et element. v-bind

Eksempel:

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

 

4. Direktiv: Dette direktivet brukes til å lytte til og håndtere hendelser på et element. v-on

Eksempel:

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

 

5. Direktiv: Dette direktivet skaper en toveis binding mellom et inngangselement og en dataegenskap. v-model

Eksempel:

<input v-model="message">

 

Dette er bare noen grunnleggende directives i Vue.js. Du kan også lage din egen tilpassede directives for å utføre spesifikk atferd i Vue.js-applikasjonen din.