Directives a Vue.js-ben lehetővé teszi speciális viselkedések alkalmazását a DOM elemeire. Előtagjuk a v- szintaxissal van ellátva, és a DOM manipulálására, az események kezelésére, az elemek feltételes renderelésére stb. A Vue.js számos beépített elemet tartalmaz, directives például, és, amelyek a gyakori használati esetek széles skáláját fedik le. v-if v-for v-bind v-on
Íme néhány gyakori directives a Vue.js-ben:
1. Irányelv: Ez az irányelv egy elem feltételen alapuló feltételes megjelenítésére szolgál. v-if
Példa:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Irányelv: Ez az irányelv egy tömb vagy objektum feletti iterációra és megfelelő elemek létrehozására szolgál. v-for
Példa:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Irányelv: Ez az irányelv egy kifejezés értékének egy attribútumhoz vagy egy elem tulajdonságához való kötésére szolgál. v-bind
Példa:
<img v-bind:src="imageUrl">
4. Irányelv: Ez az irányelv egy elem eseményeinek meghallgatására és kezelésére szolgál. v-on
Példa:
<button v-on:click="handleClick">Click me!</button>
5. Irányelv: Ez az irányelv kétirányú kötést hoz létre egy bemeneti elem és egy adattulajdonság között. v-model
Példa:
<input v-model="message">
Ez csak néhány alap directives a Vue.js-ben. Saját egyéni beállításokat is létrehozhat directives a Vue.js alkalmazás meghatározott viselkedéseinek végrehajtásához.