Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Vue.js Cheat Sheet (DRAFT) by

Vue.js commands cheat sheet

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Main ideas

Single­-File Components (*.vue)
encaps­ulates the compon­ent's logic (JavaS­cript), template (HTML), and styles (CSS) in a single file
Options API
beginn­er-­fri­endly by abstra­cting away the reactivity details and enforcing code organi­zation via option groups
Note: there exists also the compos­ition API

Create an app with Vite

To install npm you might need Node.js: https://nodejs.org/en
ass router, ESLint for good code quality and Prettier for code formatting
npm install : install project dependencies
npm run format : code formatting (from Prettier)
npm run dev: starts develo­pment server
vite build: create a production build

Structure

<script>
import ChildComp from './Chi­ldC­omp.vue'
export default {
  data(), computed:, methods:, mounted(), watch:,
 compon­ents:, emits:, created()
    {...}
}
</script>
Where to write vue.js script
<te­mpl­ate> ... </t­emp­lat­e>
Where to write the "­HTM­L" code
<style scoped> ... </s­tyl­e>
Where to write the CSS code
Applied to elements of the current component only

Script

data() {
  return {
    property: value
  }
}
Properties returned from data() become reactive state and will be exposed on 
this
 
methods: {
  function() {
    code including this.p­roperty
  }
}
Methods are functions that mutate state and trigger updates. They can be bound as event handlers in templates.
 
mounted() {
   code
}
Lifecycle hooks are called at different stages of a compon­ent's lifecycle. This function will be called when the component is mounted
 
computed: {
  fct() {
    return code
  }
}
Tracks other reactive state used in its comput­ation as depend­encies. It caches the result and automa­tically updates it when its depend­encies change.
 
watch: {
  prop() {
    code
  }
}
The watch callback is called when prop changes, and receives the new value as the argument
 
compon­ents: {
  ChildComp
}
Register child component
inside child component
props: {
  prop: value
}
Child component can accept input from the parent
inside child component
emits: ['eventName'],
created() {
  this.$­emit('eventName', '*addi­tional arg')
}
Child component emits events to the parent
 

Directives

v-text­="prop"
Sets the inner text
v-bind:attr="prop" or :attr="prop"
Bind an attribute to a dynamic value: reactive updates attribute
v-on:c­lic­k="fct" or @click­="fct"
Listen to DOM events and execute fct from methods()
v-mode­l="prop"
2 way data bounding: automa­tically syncs the form's value to the bound state
v-mode­l.l­azy­="prop"
updates on change event
v-mode­l.t­rim­="prop"
removes extra whitespace
v-mode­l.n­umb­er=­"prop"
always return a number
v-if="prop"
v-else, v-else-if
Render only if property is truthy
v-for=­"element in array" :key="elemen­t.obj"
v-for="(element, index) in array" :key="elemen­t.obj"
*array can be replaced by a computed property
Render a list of elements based on array
Note: always use key
v-once
Sets val once; Never update
v-show
Toggles display CSS value
v-html­="attr"
Sets the inner HTML

Other

{{ property }}
Render dynamic text based on the value of property
ref="na­me"
Template ref: a reference to an element in the template
this.$­­re­fs.name
element will be exposed there
Note: only accessible after the component is mounted
<ch­ild­Com­p/> or <ch­ild­Com­p>slot content</c­hil­dCo­mp>
Render child component
<ch­ildComp :child­Pro­p="d­ata­Pro­p"­/>
Parent can pass the prop to the child just like attrib­­utes. To pass a dynamic value, we can also use the v-bind syntax
<ch­ildComp @event­Nam­e=(arg) => parentProp = arg"­­/>
Parent can listen to child-­­em­itted events using v-on
In child template: <sl­­ot­/> or <sl­­ot> fallback content </s­­lo­t>
Parent can pass down template fragments to the child
<slot name='name'></slot>
In parent: <te­mplate v-slot:name> content </t­emp­lat­e>
Specify a name to the slot.
By default, the name is 'default'

Built-in components

<Ke­epA­liv­e>
Remembers the state of non-active dynamic components
<Te­lep­ort>
Moves an element to another place in the DOM structure
<Tr­ans­iti­on>
Animates an element as it is removed from, or added to, our applic­ation with v-if or v-show, or with dynamic compon­ents.
<Tr­ans­iti­onG­rou­p>
Animates elements that are added to our page with v-for