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​=​'​objectI​D​'​>...</​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 ​[email protected] 
​// wait for DOM to mount  
​onMounted​(() => {
Hope this helped!  
console.​log​(​example​.value)
})

return { ​example ​}
}

 
4