Vue 3 Cheat Sheet

Posted on  by admin

ref

Vue Global Configs

Vuejs has become one of the most successfully applied, loved and trusted frontend JavaScript frameworks among our community.

Vue 3 Lifecycle Hooks

Advanced routing

Route alias

Named routes

Getting started with router

The Vue3 comes with a whole lot of new features.

Custom directives

Vue Templates and Themes

What you need to know about Vue 3

Vue Lifecycle Hooks

MethodDescription
v-model.lazy="..."Syncs input after change event
v-model.number="..."Always returns a number
v-model.trim="..."Strips whitespace

In this article we will go through all the fundamentals of Vue2 and Vue3.

Vue Cheat Sheet for 3 and 2 Version

Global mixins

Vue Data Property

Global filters

Custom global directives

Router links

MethodDescription
.stopStop all event propagation
.self Only trigger if event.target is element itself

What's Inside?

Free Vue 3 Cheatsheet

Basically a Vue Cheat Sheet to make your life easier.

Masa U

Mixin option merging

Vue 3 Lifecycle Hooks

Vue Global Configs

Programmatic navigation

We will break it down our vue cheat sheet into different sections like global APIs, Vue Configs and the rest.

Vue DOM

Filters

new Vue({}): This method provides the Vuejs instance an existing DOM element to mount on.

Mixins

MethodDescription
beforeCreateAfter the instance has been initialized #
createdAfter the instance is created #
beforeMountBefore the first render #
mountedAfter the instance has been mounted #
beforeUpdateWhen data changes, before the DOM is patched #
updatedAfter a data change #
beforeDestroyBefore the instance is destroyed #
destroyedAfter a Vue instance has been destroyed #

This is where all your Vuejs Codes are defined.

Router

Route redirection

Vue DOM

Vue 3 Composition API

el: A CSS selector string or an actual HTMLElement that all the Vuejs codes will be mounted.

template: A string template which is used as the markup for the Vue instance.You Vuejs components are defined here.

Vue 3 Composition API

Vue Templates and Themes

render: h => h(App): The render function receives a createElement method as it’s first argument used to create VNodes.

The Ultimate Resource for All Vue Developers

Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX.

Vue Lifecycle Hooks

Vue Data Property

Programmatic named navigation

Named routes with params

If h is not available in the scope, your app will throw an error.

Multiple slots

Defining routes

Dynamic routes

renderError (createElement, err): This provides render output when the default render function encounters an error.

Also see

  • The error encounter will be passed into the function as a second param.
  • props: This is a list of attributes that are exposed to accept data from their parent component.
  • You can implement this using an array and then pass all the parent data into it.
  • It also accepts extra configs for data type checking and custom validation.
  • data(){return{}}: This is a data object for a particular Vuejs instance.