0% found this document useful (0 votes)
376 views2 pages

Vue Essentials Cheat Sheet

This document provides a summary of key concepts in Vue including expressions, directives, components, events, and libraries. Expressions are used to output dynamic data with syntax like {{ expression }}. Directives like v-if and v-for control the display of elements. Components define reusable UI building blocks with properties, data, and lifecycle hooks. Events allow communication between parent and child components. Popular Vue libraries include Vue CLI, Vue Router, Vue DevTools, and Nuxt.js.

Uploaded by

S Ajith Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
376 views2 pages

Vue Essentials Cheat Sheet

This document provides a summary of key concepts in Vue including expressions, directives, components, events, and libraries. Expressions are used to output dynamic data with syntax like {{ expression }}. Directives like v-if and v-for control the display of elements. Components define reusable UI building blocks with properties, data, and lifecycle hooks. Events allow communication between parent and child components. Popular Vue libraries include Vue CLI, Vue Router, Vue DevTools, and Nuxt.js.

Uploaded by

S Ajith Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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" :key="item.id"> .tab .up .ctrl
.delete .down .alt
.esc .left .shift
.space .right .meta

Need help on your path to Vue Mastery? Mouse modifiers:

Checkout our tutorials on VueMastery.com .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,
<div>
required: true,
<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>
}
},
computed: { Return cached values until MULTIPLE SLOTS
fullName: function () { dependencies change Component template:
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,
custom events to pass data to parent elements. <app-layout>
<h1 slot="header">Page title</h1>
Set listener on component, within its parent: <p>the main content.</p>
<p slot="footer">Contact info</p>
<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.

Created by your friends at Nuxt.js


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

You might also like