1. Vue Composition Api Computed
2. Vue 3 Composition Api Cheat Sheet
3. Vue3 Composition Api Emit
4. Vue 3 Cheat Sheet Printable
5. Vue 3 Cheat Sheet 2019

• Vue.js - The Progressive JavaScript Framework. All lifecycle hooks automatically have their this context bound to the instance, so that you can access data, computed properties, and methods.
• My cheat sheet for vue.js most basic stuff. The goal wasn't to make another Vue documentation, because the official one is already badass. Big thank you to boussadjra for making this cheat sheet available as a website. Contributions and PRs are very welcome. 'You must type each of these exercises in, manually.

Vue essentials cheat sheet.VUE ESSENTIALS CHEAT SHEET COMPONENT ANATOMY Vue. Component('my-component'components: Components that can be used. LIBRARIES YOU SHOULD KNOW Vue CLI Command line interface for rapid Vue development Vue Router Navigation. Our Vue essentials, Vue 3, and Nuxt.Js cheat sheets save you time and energy by giving you essential syntax at your fingertips. Vue mastery As the ultimate resource for Vue.js developers, Vue Mastery produces weekly lessons so you can learn what you need to. Vue 3 specifics; Class Components & Decorators; Section 1: Setup Prerequisites. A good understanding of Vue.js; Read the TypeScript support section in the Vue docs 2.x 3.x; Vue + TypeScript Starter Kits. Using the Vue CLI, you can select the TypeScript plugin to be setup in a new a Vue project.

• Directives
• Options passed to a Vue object
• Instance properties

Directives

Directives are attributes identified by the v- prefix.

v-bind and v-on have a shorthand format:

Example of v-if / v-else / v-else-if:

Conditionals

You can embed a conditional in an expression using the ternary operator:

Working with form elements

To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy instead of just v.model.

Working with input fields, v-model.trim is useful because it automatically removes whitespace.

And if you accept a number instead than a string, make sure you use v-model.number.

Modifying events

I use click as an example, but applies to all possible events

• v-on:click.native trigger a native DOM event instead of a Vue event
• v-on:click.stop stop the click event propagation
• v-on:click.passive makes use of the passive option of addEventListener
• v-on:click.capture use event capturing instead of event bubbling
• v-on:click.self make sure the click event was not bubbled from a child event, but directly happened on that element
• v-on:click.once the event will only be triggered exactly once
• v-on:submit.prevent: call event.preventDefault() on the triggered submit event, used to avoid a form submit to reload the page

For more on propagation, bubbling/capturing see my JavaScript events guide.

Mouse event modifiers

• v-on:click .left triggers only on left mouse button click
• v-on:click .right triggers only on right mouse button click
• v-on:click .middle triggers only on middle mouse button click

Submit an event only if a particular key is pressed

• v-on:keyup.enter
• v-on:keyup.tab
• v-on:keyup.delete
• v-on:keyup.esc
• v-on:keyup.up
• v-on:keyup.down
• v-on:keyup.left
• v-on:keyup.right

Keyboard event modifiers

Only trigger the event if a particular keyboard key is also pressed:

• .ctrl
• .alt
• .shift
• .meta (cmd on Mac, windows key on Win)

v-bind

• v-bind .prop bind a prop instead of an attribute
• v-bind .camel use camelCase for the attribute name
• v-bind .sync a syntactic sugar that expands into a v-on handler for updating the bound value. See this.

Lifecycle Hooks

• beforeCreate called before the app is created
• created called after the app is created
• beforeMount called before the app is mounted on the DOM
• mounted called after the app is mounted on the DOM
• beforeDestroy called before the app is destroyed
• destroyed called after the app is destroyed
• beforeUpdate called before a property is updated
• updated called after a property is updated
• activated called when a kept-alive component is activated
• deactivated called when a kept-alive component is deactivated

Built-in components

Vue provides 5 built-in components:

• <component>
• <transition>
• <transition-group>
• <keep-alive>
• <slot>

Global Configuration of the Vue object

The Vue.config object has these properties, which you can modify when you create the instance:

Methods of the Vue object

Options passed to a Vue object

When initializing a Vue object, you pass in an object:

This object accepts a number of properties.

Example of defining data, methods and computed properties:

DOM

• el sets the DOM element where the instance mounts on. It can be a CSS Selector, or an HTMLElement
• template is a template, represented as a string, that will replace the mounted element
• render alternatively to define the template, you can define a template using a render function
• renderError set an alternative output when the function attached to render fails

Vue instance assets

• directives the set of directives to associate to the Vue instance
• filters the set of filters to associate to the Vue instance
• components the set of components to associate to the Vue instance

Vue composition options

• parent specifies the parent instance
• mixins sets an array of mixin objects
• extends extend another component

Other Vue object options

• name setting a name to the component lets you invoke it, useful in debugging or when you need to recursively add a component in its template
• functional if true, sets the component to be stateless (no data) and instanceless (no this), making it more lightweight
• model allows to customize the property used in events, useful for example when interacting with forms
• comments defaults to false. If set to true, retains the HTML comments that are put in templates

Vue Composition Api Computed

Instance properties

Given an instance of Vue, stored into a variable const vm = new Vue(/*...*/), you can inspect and interact with it.

Properties of a Vue instance

• vm.$data the data object associated to the instance
• vm.$props the props the instance has received
• vm.$el the DOM element to which the instance is bound
• vm.$options the object used to instantiate the Vue instance
• vm.$parent the parent instance
• vm.$root the root instance (if this is the root instance, this points to itself)
• vm.$children an array of children instances
• vm.$slots an array of the associated slots contained in the template
• vm.$scopedSlots an array of the associated scoped slots
• vm.$refs an object that contains a property for each element pointed by a ref attribute defined in the template
• vm.$isServer true if the Vue instance is running on the server (useful in server-side rendering)
• vm.$attrs an object of attributes that are provided to the component but not defined as props
• vm.$listeners an object of v-on event listeners assigned to the component

Methods Data

• vm.$watch set up a watcher for property changes in the Vue data. It can also watch for value changes inside objects
• vm.$set set a property
• vm.$delete delete a property

Vue 3 Composition Api Cheat Sheet

Events

• vm.$emit triggers a custom event on the vm Vue instance
• vm.$on listen for a custom event on the vm Vue instance
• vm.$once like $on, but listens only once
• vm.$off removes an event listener from the Vue instance

Vue3 Composition Api Emit

Lifecycle Methods

• vm.$mount mount a Vue instance on a DOM element, in case it was not mounted yet
• vm.$forceUpdate force the vm Vue instance to re-render. Does not force child components to rerender.
• vm.$nextTick accepts a callback and schedules that for the next DOM update cycle
• vm.$destroy destroys the application and remove all child components, observers and listeners

Download my free Vue Handbook and check out my Vue Course!

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS3 cheat sheet that would present the main features of CSS3 in a handy, printable reference card.

Vue 3 Cheat Sheet Printable

So we asked our friend Chris Hanscom from Veign (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our lastposts and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.). The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine. Thank you for your great work, Chris Hanscom!

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

The cheat sheet was done in the same format as the CSS 2 Reference Guide that you may want to use for your projects as well.

Download the CSS 3 Cheat Sheet for free!

• preview (.gif, 1255×882px)
• download the pdf (5 pages, 123 Kb)

Thank you very much, Chris Hanscom! We appreciate your efforts.

Vue 3 Cheat Sheet 2019

Further Resources About CSS 3

• Take Your Design To The Next Level With CSS3 In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
• Push Your Web Design Into The Future With CSS3 A couple of HTML 5 examples and experiments.