directives

V-Model

Create a two-way binding on a form input element or a component.

"I want to be.. "

V-If

Conditionally render an element or a template fragment based on the truthy-ness of the expression value.

If you get it right, you get a..

V-Else

Denote the "else block" for v-if or a v-if / v-else-if chain.

If you get it wrong.. 🍪

V-Else-If

Denote the "else if block" for v-if. Can be chained.

Nothing is not the answer I'm looking for..

V-For

Render the element or template block multiple times based on the source data.

List from array

  • Jim Halpert
  • Dwight Schrute
  • Kevin Malone
  • Michael Scott

List from number

  • 1. This is index: 0
  • 2. This is index: 1
  • 3. This is index: 2
  • 4. This is index: 3

V-On

Attach an event listener to the element. Has a shorthand: @

Hover me!

V-Bind

Dynamically bind one or more attributes, or a component prop to an expression. Has a shorthand: :

Press a button to bind a color to this card.

V-Slot

Denote named slots or scoped slots that expect to receive props. Has a shorthand: #

The title and description for each of these cards are handled by slots, telling them where to place each piece of content.

V-Pre

Skip compilation for this element and all its children.

Without v-pre: Just showing off the v-pre directive With v-pre: {{ message }}

V-Once

Render the element and component once only, and skip future updates.

V-Memo

V-Cloak

Used to hide un-compiled template until it is ready.

W</>LK