VUE3 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> -if='
<div v 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>
<span v-text='msg'></span>
HANDLING EVENTS
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>
❌ <span> {{ let msg = 'hi' } } </span>
const count = (event) => {
console.log(event.target)
}
DIRECTIVES
v-if Puts el in DOM if true Event modifiers (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 }} : {{ i tem }}
</li>
1
VUE3 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
-bind:id='objectID'>...</div>
<div v
<!-- 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 Modifiers
Child Component (MyButton.Vue)
.lazy pdates on change event
u
.trim removes extra whitespace <div>
<slot name='top'></slot>
<slot name='bottom'></slot>
Use Objects to Bind Class/Styles </div>
class='{error: hasError}' />
<input :
<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.t
itle }}
Slots allow for content injection from a parent </slot>
component to a child component. </div>
2
VUE3 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 - finds 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
VUE3 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 = c omputed(() => 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. Als 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 Vulma
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 }
}
4
