Show Menu
Cheatography

Vue.js Cheat Sheet (DRAFT) by

Vue.js cheat sheet

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Loop

<li v-for="task in tasks">{{ task }}</li>

Normal Directive

<div v-if="ok"></div>

Directive with argument

<button v-on:click="onClick"></button>

v-on with argument + key modifier

<input v-on:keyup.enter="handleEnter">
 

Shorthand @ for v-on

<button @click="onClick"></button>
<input @keyup.enter="handleEnter">
 

Bind class attribute

<li :class="task.completed">{{ task.name }}</li>

Use array:
<li :class="['one', 'two', 'three']">
    {{ task.name }}
</li>

Array with conditional class:
<li :class="['one', 'two', someThing ? 'three' : '']">
    {{ task.name }}
</li>

Use object:
<li :class="{ 'completed': task.completed }">
    {{ task.name }}
</li>