Basic directive helpers

<div id='app'>
  <input v-model='message'>
    <li v-for='item in items' :key='item'>
  • mustaches { { message }} can be used only as inner block (not html attributes). Use ternary expression instead if flow. Can not use statement like a=1.
  • For html attributes you have to use <div v-bind:id='dynamicId'></div>. For boolean atributes true will show and false, null, undefined will hide that attribute for example <button v-bind:disabled='isButtonDisabled'>B</button>. Shorthand for v-bind: is :
  • model v-model='message'
  • conditional v-if='seen' directive.
  • in loops v-for='item in items' you need a key (which is uniq) so it keeps track of changes between dom and virtual dom. v-bind:key='' or shorthand :key=''.
  • <span v-once>{ { message }}</span> will render only once even you change data for inside model interpolation { { message }}
  • <span v-html='rawHtml'></span> will output without html encoding
  • events v-on:click='shuffle' or shorthand @click='shuffle'. You can use
  • modifiers like <form v-on:submit.prevent='onSubmit'> which call preventDefault() on triggered event
  • bind specific dom attributes v-bind:title='message'
  • instead <img source='{ {}}'> use <img :src='comment.image'>

Vue instance

var vm = new Vue({
  el: '#example',
  data: {
    asd: 1 // you can access data with `vm.asd`
  // lifecycle hooks created, mounted, updated, destroyed
  created: function() {},
  computed: {
    // getters for computed values like helpers, but result is chaches as long
    // as dependencies are not changed (message is not updated). `` is
    // not reactive dependency
    reverseMessage: function() {
      return this.message.split('').reverse().join('')
  methods: {
    reverseMessage: function() {}


vm.asd // => 1
vm.asd = 2 // reactiveness in action will update data.asd == 2
vm.non_bind = 1 // this was not defined at time of instantiating so no update
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes

Do not use arrow functions since this will not be bound to view instance.


<transition-group tag='ul name='items'>
.items-move {
  transition: transform 0.5s ease;


Template for component can be referenced with id or written inline. Pass data to components with props, that are ‘attributes’ for components. They are passed with v-bind:name_of_attribute='value_of_attribute'

Vue.component('AppComponent', {
  template: '#componentTemplate',
  props: ['comment']
  <li is='app-component' v-for='comment in comments' :key='comment'
<script type='text/x-template' id='componentTemplate'>

Vue cli

# yarn will install old ~2 version
# yarn global add @vue/cli
npm install -g @vue/cli

vue create my-project