Directives ve Vue.js: Použití a příklady

Directives ve Vue.js vám umožní aplikovat speciální chování na prvky v DOM. Mají předponu se syntaxí v- a používají se k manipulaci s DOM, zpracování událostí, podmíněnému vykreslování prvků a dalším. Vue.js poskytuje několik vestavěných, jako directives jsou, , a, které pokrývají širokou škálu běžných případů použití. v-if v-for v-bind v-on

Zde jsou některé běžné directives ve Vue.js:

 

1. Směrnice: Tato směrnice se používá k podmíněnému vykreslení prvku na základě podmínky. v-if

Příklad:

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

 

2. Direktiva: Tato direktiva se používá k iteraci pole nebo objektu a vytvoření odpovídajících prvků. v-for

Příklad:

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

 

3. Direktiva: Tato direktiva se používá k navázání hodnoty výrazu na atribut nebo vlastnost prvku. v-bind

Příklad:

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

 

4. Direktiva: Tato direktiva se používá k naslouchání a zpracování událostí na prvku. v-on

Příklad:

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

 

5. Směrnice: Tato směrnice vytváří obousměrnou vazbu mezi vstupním prvkem a vlastností dat. v-model

Příklad:

<input v-model="message">

 

To jsou jen některé základní directives ve Vue.js. Můžete si také vytvořit své vlastní directives, abyste mohli provádět specifické chování ve vaší aplikaci Vue.js.