Vue Mastery

CHEAT SHEET (Part 1)

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>{{ [Link]() }}</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:
shorthand <button @click="addToCart">...
<input v-model="firstName" >

Arguments can be passed:

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

[Link]="..." Strips whitespace <form @[Link]="addProduct">...

Only trigger once:

LIST RENDERING
<img @[Link]="showImage">...
<li v-for="item in items" :key="[Link]">
{{ item }} .stop Stop all event propagation
</li> key always recommended
.self Only trigger if [Link] is element itself
To access the position in the array:
Keyboard entry example:
<li v-for="(item, index) in items">...
<input @[Link]="submit">
To iterate through objects:
Call onCopy when control-c is pressed:
<li v-for="(value, key) in object">...
<input @[Link].c="onCopy">
Using v-for with a component:
Key modifiers:
<CartProduct v-for="item in products"
.tab .up .ctrl
:product="item"
.delete .down .alt
:key="[Link]" />
.esc .left .shift
.space .right .meta

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

Checkout our tutorials on [Link]
.left .right .middle
 Vue Mastery

CHEAT SHEET (Part 2)

COMPONENT ANATOMY LIFECYCLE HOOKS

<script setup> onBeforeMount onBeforeUnmount
import { ref, watch, computed } from 'vue' onMounted onUnmounted
import Product from './[Link]' onBeforeUpdate onActivated
import Review from './[Link]' Import other
components onUpdated onDeactivated
const props = defineProps({
message: String,
product: Object,
USING A SINGLE SLOT
The parameters that
email: { the component accepts Component template:
type: String,
required: true, <div>
default: 'none', <h2>I'm a title</h2>
validator: (value) => { <slot>
Should return true if value is valid Only displayed if no slot content
} </slot>
} </div>
})
Use of component with data for slot:
const firstName = ref('Vue')
const lastName = ref('Mastery') <MyComponent >
<p>This will go in the slot</p>
const fullName = computed(() => { </MyComponent >
return [Link] + ' ' + [Link]
}) Return cached values until
dependencies change MULTIPLE SLOTS
watch(firstName, (value, oldValue) => { Component template:

Called when firstName changes value <div class="container">

})
<header>
</script>
<slot name="header"></slot>
<template> </header>
<span>{{ message }}</span> <main>
</template> <slot>Default content</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
CUSTOM EVENTS </div>
Use props (above) to pass data into child components,
custom events to pass data to parent elements. Use of component with data for slot:
Set listener on component, within its parent: <AppLayout >
<template v-slot:header><h1>Title</h1></template>
<ButtonCounter v-on:incrementBy="incWithVal">
<p>The main content.</p>
<template v-slot:footer><p>Footer</p></template>
Inside parent component: </AppLayout >

const incWithVal = function(toAdd) { ... }

LIBRARIES YOU SHOULD KNOW
create-vue
Inside ButtonCounter template: Custom event name
Command line interface for rapid Vue development.
defineEmits(['incrementBy']) Vue Router
emit('incrementBy', 5) Data sent up to parent Navigation for a Single-Page Application.
Vue DevTools
Browser extension for debugging Vue applications.
[Link]
Library for server side rendering, code-splitting, hot-re-
Created by your friends at [Link]
loading, static generation and more.