VUE ESSENTIALS

CHEAT SHEET
EXPRESSIONS BINDING
<div id="app"> <a v-bind:href="url">...</a>
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p> shorthand <a :href="url">...</a>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p> True or false will add or remove attribute:
</div>
<button :disabled="isButtonDisabled”>...

DIRECTIVES If isActive is truthy, the class ‘active’ will appear:

Element inserted/removed based on truthiness:
<div :class="{ active: isActive }">...
<p v-if="inStock">{{ product }}</p>
Style color set to value of activeColor:

<p v-else-if="onSale">...</p> <div :style="{ color: activeColor }">

<p v-else>...</p>

Toggles the display: none CSS property:

ACTIONS / EVENTS
Calls addToCart method on component:
<p v-show="showProductDetails">...</p>
<button v-on:click="addToCart">...
Two-way data binding:

<input v-model="firstName" > shorthand <button @click="addToCart">...

Arguments can be passed:

v-model.lazy="..." Syncs input after change event
<button @click="addToCart(product)">...
v-model.number="..." Always returns a number
To prevent default behavior (e.g. page reload):

v-model.trim="..." Strips whitespace <form @submit.prevent="addProduct">...

Only trigger once:

LIST RENDERING <img @mouseover.once="showImage">...
<li v-for="item in items" :key="item.id">
{{ item }}
.stop Stop all event propagation
</li> key always recommended

To access the position in the array: .self Only trigger if event.target is element itself

<li v-for="(item, index) in items">... Keyboard entry example:

To iterate through objects: <input @keyup.enter="submit">

<li v-for="(value, key) in object">... Call onCopy when control-c is pressed:

Using v-for with a component: <input @keyup.ctrl.c="onCopy">

<cart-product v-for="item in products" Key modifiers:

:product="item" .tab .up .ctrl
:key="item.id" /> .delete .down .alt
.esc .left .shift
.space .right .meta

Mouse modifiers:

.left .right .middle

VUE ESSENTIALS
CHEAT SHEET
COMPONENT ANATOMY LIFECYCLE HOOKS
Vue.component('my-component', { beforeCreate beforeUpdate
components: { Components that can be used in the template created updated
ProductComponent, ReviewComponent beforeMount beforeDestroy
}, mounted destroyed
props: { The parameters the component accepts
message: String,
product: Object, USING A SINGLE SLOT
email: { Component template:
type: String,
required: true, <div>
<h2>I'm a title</h2>
default: 'none'
<slot>
validator: function (value) {
Only displayed if no slot content
Should return true if value is valid
</slot>
}
</div>
}
},
Use of component with data for slot:
data: function() { Must be a function
return { <my-component>
firstName: 'Vue', <p>This will go in the slot</p>
lastName: 'Mastery' </my-component>
}
}, MULTIPLE SLOTS
computed: { Return cached values until
Component template:
fullName: function () { dependencies change
return this.firstName + ' ' + this.lastName <div class="container">
} <header>
}, <slot name="header"></slot>
watch: { Called when firstName changes value </header>
firstName: function (value, oldValue) { ... } <main>
}, <slot>Default content</slot>
methods: { ... }, </main>
template: '<span>{{ message }}</span>', <footer>
}) Can also use backticks for multi-line <slot name="footer"></slot>
</footer>
</div>

CUSTOM EVENTS Use of component with data for slot:

Use props (above) to pass data into child components,
<app-layout>
custom events to pass data to parent elements.
<template v-slot:header><h1>Title</h1></template>
Set listener on component, within its parent: <p>The main content.</p>
<template v-slot:footer><p>Footer</p></template>
<button-counter v-on:incrementBy="incWithVal"> </app-layout>

Inside parent component:

LIBRARIES YOU SHOULD KNOW
methods: {
incWithVal: function (toAdd) { ... } Vue CLI
} Command line interface for rapid Vue development.

Vue Router
Inside button-counter template:
Navigation for a Single-Page Application.
Custom event name
Vue DevTools
this.$emit('incrementBy', 5) Data sent up to parent
Browser extension for debugging Vue applications.

Nuxt.js
Library for server side rendering, code-splitting, hot-re-
loading, static generation and more.