Vue-Essentials-Cheat-Sheet

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:
<button :disabled="isButtonDisabled”>...
</div>
If isActive is truthy, the class ‘active’ will appear:
DIRECTIVES <div :class="{ active: isActive }">...

Element inserted/removed based on truthiness:

<p v-if="inStock">{{ product }}</p>

<p v-else-if="onSale">...</p> Style color set to value of activeColor:
<p v-else>...</p> <div :style="{ color: activeColor }">

Toggles the display: none CSS property: ACTIONS / EVENTS
<p v-show="showProductDetails">...</p>
Calls addToCart method on component:
Two-way data binding: <button v-on:click="addToCart">...
<input v-model="firstName" >
shorthand <button @click="addToCart">...

v-model.lazy="..." Syncs input after change event Arguments can be passed:
<button @click="addToCart(product)">...

v-model.number="..." Always returns a number To prevent default behavior (e.g. page reload):
<form @submit.prevent="addProduct">...
v-model.trim="..." Strips whitespace

LIST RENDERING Only trigger once:
<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:
<input @keyup.enter="submit">
To iterate through objects:
<li v-for="(value, key) in object">... Call onCopy when control-c is pressed:
<input @keyup.ctrl.c="onCopy">
Using v-for with a component:
Key modifiers: .up .ctrl
<cart-product v-for="item in products" .down .alt
:product="item" :key="item.id"> .tab .left .shift
.delete .right .meta
Need help on your path to Vue Mastery? .esc
Checkout our tutorials on VueMastery.com .space .right .middle

Mouse modifiers:

.left

VUE ESSENTIALS
CHEAT SHEET

COMPONENT ANATOMY LIFECYCLE HOOKS

Vue.component('my-component', { beforeCreate beforeUpdate
created updated
components: { Components that can be used in the template beforeMount beforeDestroy
mounted destroyed
ProductComponent, ReviewComponent

},

props: { The parameters the component accepts

message: String, USING A SINGLE SLOT

product: Object, Component template:

email: { <div>
<h2>I'm a title</h2>
type: String, <slot>
Only displayed if no slot content
required: true, </slot>

default: "none" </div>

validator: function (value) {

} Should return true if value is valid

}

}, Use of component with data for slot:
data: function() { Must be a function
<my-component>
return { <p>This will go in the slot</p>

firstName: 'Vue', </my-component>

lastName: 'Mastery'

}

}, Return cached values until MULTIPLE SLOTS

computed: { Component template:
fullName: function () { dependencies change
<div class="container">
return this.firstName + ' ' + this.lastName <header>
<slot name="header"></slot>
} </header>
<main>
}, <slot>Default content</slot>
watch: { Called when firstName changes value </main>
<footer>
firstName: function (value, oldValue) { ... } <slot name="footer"></slot>
</footer>
},
</div>
methods: { ... },
Use of component with data for slot:
template: '<span>{{ message }}</span>',
<app-layout>
}) Can also use backticks for multi-line <h1 slot="header">Page title</h1>
<p>the main content.</p>
CUSTOM EVENTS <p slot="footer">Contact info</p>
</app-layout>
Use props (above) to pass data into child components,
custom events to pass data to parent elements. LIBRARIES YOU SHOULD KNOW

Set listener on component, within its parent: Vue CLI
Command line interface for rapid Vue development.
<button-counter v-on:incrementBy="incWithVal">
Vue Router
Inside parent component: Navigation for a Single-Page Application.

methods: { Vue DevTools
incWithVal: function (toAdd) { ... } Browser extension for debugging Vue applications.

} Nuxt.js
Library for server side rendering, code-splitting, hot-re-
Inside button-counter template: loading, static generation and more.
Custom event name

this.$emit('incrementBy', 5) Data sent up to parent

Created by your friends at

VueMastery.com