Vue.js Directives

v-if="condition" # conditional rendering
v-else-if="otherCondition" # else if
v-else # else clause

v-show="isVisible" # toggle display CSS (element always rendered)

v-for="item in items" :key="item.id" # loop through array
v-for="(item, index) in items" # with index
v-for="(value, key) in object" # loop through object
v-for="n in 10" # loop numbers 1-10

v-on:click="handleClick" # event listener
@click="handleClick" # shorthand
@click="count++" # inline expression
@submit.prevent="onSubmit" # event modifier

v-model="message" # two-way data binding
v-model.lazy="message" # sync on change, not input
v-model.number="age" # convert to number
v-model.trim="message" # trim whitespace

@click.stop # stopPropagation
@click.prevent # preventDefault
@click.once # trigger once
@keyup.enter # key modifier