Vue Cheat Sheet Pdf

Posted on  by admin

ref

Expressions

Hey there DEV.to community!

Binding

Shorthand syntax

True or false will add or remove attribute

If isActive is truthy, the class ‘active’ will appear

Style color set to value of activeColor

First of all, before going into the cheat sheet, I want to wish everyone a happy Nowruz as it indicates the beginning of a new year (being 1400 in the Shamsi (Jalali) calendar right now) and/or the beginning of the spring season to whomever in whichever country celebrate this event.

Directives

Element inserted/removed based on truthiness

Toggles the display: none CSS property

Two-way data binding

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

So happy new year and happy Nowruz.

Actions/Events

Calls addToCart method on component

Shorthand syntax

Arguments can be passed

To prevent default behavior (e.g. page reload)

Only trigger once

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

Keyboard entry example

Call onCopy when control-c is pressed

As I am writing this post it is the 5th of Farvardin, 1400 which is 5 days past the new year :).

List rendering

The :key is always recommended

To access the position in the array

To iterate through objects

Using v-for with a component

As you might know, if you are an ambitious Vue developer, Vue has released its version 3 not so long ago.

Component

Component anatomy

This version had some major changes and some minor ones.

Lifecycle hooks

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 #

Here I am listing them as a cheat sheet so you can to them whenever you want just as I might refer to my own post anytime XD.

Custom events

Set listener on component, within its parent

Inside parent component

Inside button-counter template

And this post will be just a little bit more than a cheat sheet since some features require more describing.

Some code examples are from Vue's official documentation.

Single file components

Single file

I believe Vue 3 has made a huge step forward into making Vue a way better solution for large-scale, enterprise application development than it was before.

Separation

Composition API. Previously, what we used to do was to instantiate a new Vue instance, and mount it in an element (usually being the #app) as below:.

Slots

Using a single slot

Component template

Use of component with data for slot

Now what we have to do is to call the createApp method from 'vue' to create a new app and then mount it in an element:.

Multiple slots

Component template

Use of component with data for slots

In Vue 3, instead of configuring the Vue global object directly, for adding plugins and etc, you can configure your object instance instead.

Also see

  • As much as it sounds really dangerous when you read this feature's name, it is a super simple and very useful feature.
  • This feature lets you split your component into smaller pieces, simply put.
  • This allows you to use repeatable parts of your components without needing to code them again.
  • Given that you have to components, named Fruits and Countries and in them, you have a list and an input to search in the list to see if the user's input exists or not.
  • This is a very simple example so you don't get frustrated :D.