VUE 3 CHEATSHEET FOR DEVELOPERS

Put together by your friends at learnvue.co

CREATING YOUR APP WITH VITE CONDITIONAL RENDERING

Quick Vue3 development environment Add/Remove Element from DOM w/ Boolean

npm init vite-app <project-name> <div v-if='date == today'>...</div>

cd <project-name> <div v-else-if='!done'>...</div>
npm install <div v-else>...</div>
npm run dev

Toggles display CSS instead of editing DOM

TEMPLATE SYNTAX <div v-show='date == today'>...</div>
Text Interpolation Options
<span> {{ msg }} </span>
HANDLING EVENTS
<span v-text='msg'></span>
Capture and event and call a method
<div v-on:click='count'>Increase</div>
Setting Inner HTML
<!-- SHORTHAND -->
<span v-html='rawHTML'></span> <div @click='count'>Increase</div>

Can use JS Expressions; NOT JS Statements Method is passed a Native DOM Cvent
<span> {{ msg.reverse() }} </span> const count = (event) => {
<span> {{ let msg = 'hi' }} </span> console.log(event.target)
}

DIRECTIVES
v-if Puts el in DOM if true Event modiers (usage: v-on:click.stop)

v-else-if Like a usual conditional .stop Stops event propagation

v-else Like a usual conditional .once Can only trigger event once

v-show Toggles display CSS value .prevent Calls evt.preventDefault

v-text Sets the inner text .self Don't send if target = child

v-html Sets the inner HTML

LIST RENDERING
v-for Loop through an array/obj Basic Loop Over Array
v-on or @ Listens to DOM events
<li v-for='item in items' :key='item'>
v-bind or : Reactive updates attribute {{ item }}
</li>
v-model Two way data binding
v-once Sets val once; Never update
Loop and Track Index
<li v-for='(item, index) in items'>
{{ index }} : {{ item }}
</li>

1
VUE 3 CHEATSHEET FOR DEVELOPERS
Put together by your friends at learnvue.co

Loop Values in Object BASIC SLOTS

Child Component (MyButton.Vue)
<li v-for='obj in objects'>
{{ obj }} <div>
</li> Hello World
<slot></slot>
</div>
BINDING DATA
Simple Binding
Parent Component
<div v-bind:id='objectID'>...</div>
<!-- SHORTHAND --> <my-button>
<div :id='objectID'>...</div> This content will replace the slot
</my-button>

Two way binding with data and input

NAMED SLOTS
<input v-model='email' /> Useful when you have multiple slots. If
unnamed, name is 'default'.
Input Modiers
Child Component (MyButton.Vue)
.lazy updates on change event
.trim removes extra whitespace <div>
<slot name='top'></slot>
<slot name='bottom'></slot>
Use Objects to Bind Class/Styles </div>
<input :class='{error: hasError}' />
<input :style='{margin: space+"px"}' /> Name Slots in the Parent Component
<my-button>
BIND DATA BETWEEN CHILD & PARENT <template v-slot:top> // ...
Use v-bind to pass data from parent to child </template>
and emit a custom event to send data back. <template v-slot:bottom> // ...
</template>
</my-button>
In Parent, Bind Data & Set Listener to Update
<custom :msg='s' @update='s = $event'/>
SCOPED SLOTS
Give parent component access to child data.
In Child, Send Back Using emit(event, data)
context.emit('update', 'hello world') Child Component (MyButton.Vue)
<div>
<slot v-bind:post='post'>
SLOTS {{ post.title }}
Slots allow for content injection from a parent </slot>
component to a child component. </div>

2
VUE 3 CHEATSHEET FOR DEVELOPERS
Put together by your friends at learnvue.co

SETUP() CONTEXT OBJECT PROPERTIES

Parent Has Access to MyButton post data
<my-button> attrs Has component's attributes
<template v-slot:default='slotData'> slots Has component's slots
{{ post.author }}
emit Function to emit events
</template>
</my-button>
VUEJS LIFECYCLE HOOKS

DYNAMIC COMPONENTS *beforeCreate Use setup() instead

Changes the rendered component - nds a
registered component with the given name. *created Use setup() instead
onBeforeMount Before mounting DOM

<component :is='componentName'/> onMounted DOM can be accessed

onBeforeUpdate Reactive data changes
KEEP-ALIVE ELEMENTS onUpdated DOM has been updated
Stores a cached version of dynamic
onBeforeUnmount Component still complete
components when not visible. Avoids having
to create a new component whenever toggled. onUnmounted Teardown complete

<keep-alive>
EXAMPLE LIFECYCLE HOOK CODE
<component :is='componentName'/>
</keep-alive>
import { onMounted } from 'vue'
// ...
COMPOSITION API setup() {
Everything returned by setup() is exposed to onMounted(() => {
the template. console.log('component mounted!')
}
}
import { ref, reactive } from 'vue'
export default {
setup(props, context) { VUE GLOBAL METHODS
const val = ref('example')
const obj = reactive({ count: 0 })
mount() Mount component to DOM

const evtHandler = () => {/*...*/} forceUpdate() Force re-render

nextTick() Runs func next update
return {
val, obj, evtHandler destroy() Destroy component/app
}
}
}

3
VUE 3 CHEATSHEET FOR DEVELOPERS
Put together by your friends at learnvue.co

COMPUTED PROPERTIES VUE OBJECT API OPTIONS

A computed property is a value that is If you decide not to use the Composition API,
calculated using one or more other properties. your components will look similar to Vue2
with the Options API.
setup() {
const a = ref(1) data() Init reactive data
const b = computed(() => a.value * 2) props Data visible by parent

return { a, b } mixins Declares mixins

} components Registers children
methods Set of Vue methods
watchers Watch values for change
WATCHEFFECT()
Listens to reactive dependencies and runs a computed Cached reactive methods
method when one changes. Also runs on init.
TOP VUE LIBRARIES
vue-cli Command Line Interface
setup() {
const site = ref('learnvue.co') vue-router Handles Routing for SPAs
vuex State Management Library
watchEffect(() => {
console.log(site.value)
}) GREAT VUE UI RESOURCES
Vuetify Bootstrap Vue UIV
return { site } VueStrap Vue Material Mint UI
}
Element UI Vuecidity iView
Buefy DeepReader KeenUI

TEMPLATE REFS Quasar AT UI Bulma

Give access to DOM elements. Fish-UI Muse UI Vue Blu

// template
<div ref='example'> Example Div </div> CONTACT
// script
setup() { For any corrections, comments, or concerns,
const example = ref('learnvue.co') just contact me at matt@learnvue.co
// wait for DOM to mount
onMounted(() => {
Hope this helped!
console.log(example.value)
})

return { example }
}