Vue 2 Cheatsheet

vue-cheatsheet.md

Vue 2 Cheatsheet

• Vue instance

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
  });
  

• <span v-bind:title="message">

• <span v-if="seen">

• <li v-for="todo in todos">

• Vue instance methods attribute

  var app = new Vue({
    el: '#app',
    data: { message: 'Hello' },
    methods: {
      reverse: function() {
        return this.message.split('').reverse();
      }
    }
  })
  
  <span>{{ message }}</span>
  <button v-on:click="reverse">Reverse Message</button>
  

• 2-way binding <input v-model="message">

Components

• Example 1

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

<todo-item></todo-item>

• Example 2

<todo-item
  v-for="item in groceryList"
  v-bind:todo="item"
  v-bind:key="item.id"
></todo-item>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({ ... });

Lifecycle Hooks

Lifecycle methods as follows:

• created
• mounted
• updated
• destroyed

var app = new Vue({
  data: { ... },
  created: function () {
    ...
  }
});

Vue Instance

• Properties in data are only reactive if they existed when the instance was created. So initialize the value at instance creation time.
• Don’t use arrow functions on an options property or callback, as it screws up this