Directives

v-text="prop"

Sets the inner text

v-bind:attr="prop" or :attr="prop"

Bind an attribute to a dynamic value: reactive updates attribute

v-on:click="fct" or @click="fct"

Listen to DOM events and execute fct from methods()

v-model="prop"

2 way data bounding: automatically syncs the form's value to the bound state

v-model.lazy="prop"

updates on change event

v-model.trim="prop"

removes extra whitespace

v-model.number="prop"

always return a number

v-if="prop"
v-else, v-else-if

Render only if property is truthy

v-for="element in array" :key="element.obj"
v-for="(element, index) in array" :key="element.obj"
*array can be replaced by a computed property

Render a list of elements based on array
Note: always use key

v-once

Sets val once; Never update

v-show

Toggles display CSS value

v-html="attr"

Sets the inner HTML