Cheatsheet

Preventing easy:

    <a href="#" @click.prevent="toDo();"></a>

Easy event handling:

    <button @click.ctrl="onClick">A</button>

    <button @click.ctrl.exact="onCtrlClick">A</button>

Prop validation:

    Vue.component('example', {
      props: {
        // basic type check (`null` means accept any type)
        propA: Number,
        // multiple possible types
        propB: [String, Number],
        // a required string
        propC: {
          type: String,
          required: true
        },
        // a number with default value
        propD: {
          type: Number,
          default: 100
        },
        // object/array defaults should be returned from a
        // factory function
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // custom validator function
        propF: {
          validator: function (value) {
            return value > 10
          }
        }
      }
    })

Mixins:

require('myapp-bootstrap');

require('./components/bootstrap');

var app = new Vue({
    mixins: [require('myapp')]
});


module.exports = {
    el: '#myapp-app',

    /**
     * The application's data.
     */
    data: {
      
    },
}

module.exports = {
    /**
     * Load mixins for the component.
     */
    mixins: [
        require('./../mixins/one'),
        require('./../mixins/two'),
        require('./../mixins/three')
    ],
}

// mixins/one.js 

module.exports = {
    data: {
      
    },
}

    this.$nextTick(function () {

        if(!this.paperdoll){
            const Paperdoll = Vue.extend(require('./../Paperdoll.vue'));

            new Paperdoll({
                propsData: {
                    nativeUser: this.user,
                    nativeItems: this.items,
                }
            }).$mount('#open-' + this.user.id);
        }
    });