Deprecated: this guide targets an old version of Vuej.js (v1.0.28). See the updated Vue.js cheatsheet for new versions.

### Lists

    <li v-for="todo in todos">
      {{ todo.text }}
      {{ $index }}
    </li>

### Events

    <button v-on:click='submit'>Go</button>

### Components

    new Vue({
      components: { app: App }
    })

## API

    Vue.extend({ ... })        // creating components
    Vue.nextTick(() => {...})

    Vue.set(object, key, val)  // reactive
    Vue.delete(object, key)

    Vue.directive('my-dir', { bind, update, unbind })
    // <div v-my-dir='...'></div>

    Vue.elementDirective('my-dir', { bind, update, unbind })
    // <my-dir>...</my-dir>

    Vue.component('my-component', Vue.extend({ .. }))

    Vue.partial('my-partial', '<div>hi {{msg}}</div>')
    // <partial name='my-partial'></partial>

    new Vue({
      data: { ... }
      props: ['size'],
      props: { size: Number },
      computed: { fullname() { return this.name + ' ' + this.lastName } },
      methods: { go() { ... } },
      watch: { a (val, oldVal) { ... } },
      el: '#foo',
      template: '...',
      replace: true, // replace element (default true)

      // lifecycle
      created () {},
      beforeCompile () {},
      compiled () {},
      ready () {}, // $el is inserted for the first time
      attached () {},
      detached () {},
      beforeDestroy () {},
      destroyed () {},

      // options
      directives: {},
      elementDirectives: {},
      filters: {},
      components: {},
      transitions: {},
      partials: {}
    })

## Vue templates

Via vueify

    // app.vue
    <template>
      <h1 class="red">{{msg}}</h1>
    </template>

    <script>
      module.exports = {
        data () {
          return {
            msg: 'Hello world!'
          }
        }
      }
    </script>

Also

    <template lang='jade'>
    h1(class='red') {{msg}}
    </template>

0 Comments for this cheatsheet. Write yours!