25 Nov 2017
**Cheatsheet**
Components understanding:
<img src="http://capsule.sandra1n.com/wp-content/uploads/2017/11/props-events.png" width=250>
Preventing easy:
```html
<a href="#" @click.prevent="toDo();"></a>
```
Easy event handling:
```html
<button @click.ctrl="onClick">A</button>
<button @click.ctrl.exact="onCtrlClick">A</button>
```
Prop validation:
```js
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:
```js
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: {
},
}
```
```js
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);
}
});
```