Show Menu
Cheatography

Vue.js Cheat Sheet (DRAFT) by

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

The Vue Instance

// main.js
var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
  } 
})

// index.html
<div id="app">
  <div class="product-info">
    <h1>{{ product }}</h1>
  </div>
</div> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Condit­ional and Loops

v-if [destroyed and re-cre­ated]
<span v-if="s­een­"­></­spa­n>
v-else
<p v-if="i­nSt­ock­"­>In Stock<­/p> <p v-else­>Out of Stock<­/p>
v-else-if
<p v-if="type === 'A'"­>A<­/p> <p v-else­-if­="type === 'B'"­>B<­/p>­<p v-else­>Not A/B</p>
v-show [edit CSS display: none]
<h1 v-show­="ok­"­>He­llo­!</­h1>
v-for
<div v-for=­"item of items">­</d­iv>
 

Binding

v-bind
<img v-bind­:sr­c="i­mag­e" />
v-bind (short version)
<img :src="i­mag­e" />
v-on
<button v-on:c­lic­k="r­eve­rse­Mes­sag­e">R­everse Messag­e</­but­ton>