Директива - це атрибут HTML тега який починається з префікса "v-". Це зробленою з метою щоб не було сутичок з іншими фреймворками.
Директиви | Скорочення | Призначення | Приклад синтаксису |
---|---|---|---|
v-text | керує текстовим вмістом елемента | <div id="example" v-text="name"></div> | |
v-html | керує HTML вмістом елемента | <div id="example" v-html="name"></div> | |
v-show | керує стилем елемента display | <div id="example" v-show="true"></div> | |
v-if | перевіряє умову | <div id="example" v-if="true"></div> | |
v-else | не виконалась умова | <div id="example"><span v-if="true">Умова виконалася</span><span v-else>умова не виконалася</span></div> | |
v-else-if | якщо не виконалась умова тоді перевіряє іншу умову | <div id="example">
<span v-if="1>2">Умова виконалася</span>
<span v-else-if="1<0">умова не виконалася перевіряємо нову умову</span>
<span v-else-if="1==1">умова не виконалася перевіряємо нову умову</span></div>
| |
v-for | цикл відображення елементів | <div id="example"><span v-for="li in list"></span></div> | |
v-on | @ | подія елемента | <div id="example"><span v-on:event="function"></span></div> |
v-bind | : | пов'язує атрибут елемента з вказаним значенням | <div id="example"><span v-bind:name="value"></span></div> |
v-model | пов'язує елемент для введення даних з вказаною змінною | <div id="example"><span v-model="name"></span></div> | |
v-slot | вказує слоти | <div id="example"><span v-model="name"></span></div> | |
v-pre | не компілює вказаний тег | <div id="example"><span v-pre></span></div> | |
v-cloak | не показує тег поки немає даних | <div id="example"><span v-cloak></span></div> | |
v-once | малює елемент лише один раз при компіляції компонента | <div id="example"><span v-once></span></div> |