EXPRESSIONS
<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p>
</div>
DIRECTIVES
<p v-if="inStock">{{ product }}</p>
<p v-else-if="onSale">...</p>
<p v-else>...</p>
<p v-show="showProductDetails">...</p>
<input v-model="firstName" >
v-model.lazy="..." Syncs input after change event
v-model.number="..." Always returns a number
v-model.trim="..." Strips whitespace
LIST RENDERING
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
<li v-for="(item, index) in items">...
<li v-for="(value, key) in object">...
<cart-product v-for="item in products"
:product="item"
:key="item.id" />
BINDING
<a v-bind:href="url">...</a>
<button :disabled="isButtonDisabled”>...
<div :class="{ active: isActive }">...
<div :style="{ color: activeColor }">
ACTIONS / EVENTS
<button v-on:click="addToCart">...
<button @click="addToCart(product)">...
<form @submit.prevent="addProduct">...
<img @mouseover.once="showImage">...
.stop Stop all event propagation
.self Only trigger if event.target is element itself
<input @keyup.enter="submit">
<input @keyup.ctrl.c="onCopy">
Key modifiers:
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
Mouse modifiers
.left .right .middle
COMPONENT ANATOMY
Vue.component('my-component', {
components: {
ProductComponent, ReviewComponent
},
props: {
message: String,
product: Object,
email: {
type: String,
required: true,
default: 'none'
validator: function (value) {
}
}
},
data: function() {
return {
firstName: 'Vue',
lastName: 'Mastery'
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function (value, oldValue) { ... }
},
methods: { ... },
template: '<span>{{ message }}</span>',
})
CUSTOM EVENTS
<button-counter v-on:incrementBy="incWithVal">
methods: {
incWithVal: function (toAdd) { ... }
}
this.$emit('incrementBy', 5)
LIFECYCLE HOOKS
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
USING A SINGLE SLOT
<div>
<h2>I'm a title</h2>
<slot>
Only displayed if no slot content
</slot>
</div>
<my-component>
<p>This will go in the slot</p>
</my-component>
MULTIPLE SLOTS
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot>Default content</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<app-layout>
<template v-slot:header><h1>Title</h1></template>
<p>The main content.</p>
<template v-slot:footer><p>Footer</p></template>
</app-layout>
About Author
vrdvishwas 
