Show Menu

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.


<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">{{ }}</li>

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

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

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