Vue. JS officially came into the limelight in 2014 and is being widely used for web development. Vue.js is a JavaScript progressive framework with a variety of tools for building user interfaces. Vue.JS framework usage is not just limited to web interfaces; it is also being used for both mobile app development and desktop with Electron framework. Programmers can undertake Vue.JS training through front end web development training programs.

Before we jump to the Vue.JS cheat sheet let’s have a look at the positives offered by Vue.JS, which made it one of the most loved frameworks in 2019.

• Small Size: It takes users no time to download this framework with just a mere weight of 18 KBs. The framework just not only has a small size but has a faster speed too and beats the likes of Ember.js., Angular.js. and React.js.
• Easy to understand: A framework reaches mass adoption when it’s easy to comprehend, which is the likely case with learning Vue.js. To start-off with Vue.JS, you simply need a basic understating of CSS, HTML, and JavaScript. Through this framework, you can develop both small-scale and large-scale templates, which can save time.

• Simple Integration: JS is based on a JavaScript framework and can be easily integrated into other applications built on JavaScript. This means that it is useful for altering the pre-existing applications along with developing new web applications

• Flexible: Vue allows its users to write a template in JavaScript file, HTML file, and JavaScript file using virtual nodes. Js facilitates switching from React or Angular as its internal organization is a mixture of two
• Detailed Documentation: Documentation with Vue.Js is well structured and comprehensive covering all aspects from installation to in-depth things like scaling of the app and reactivity.
• Two-Way Communication: Lastly, Vue.js facilitates two-way communications, inherited from Angular, which makes it easy to handle HTML blocks. With two-way data binding, it’s convenient to update related components and track data updates.

Vue.JS Cheat Sheet

Vue.js Directives

Vue.js uses double braces [[ ]] in the code as place-holders for data. Vue.js directives are mainly HTML attributes with the prefix v-.

Vue Example

In this example, a new Vue object is developed with new Vue(). The characteristic here” el:” will bind the new Vue object along with the HTML element by using id="app".

<div id="app">
<h1>[[ message ]]</h1>
</div>

<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hi Vue!'}
})  </script>

Vue.js Binding

When a Vue.JS object is bound with the specific HTML element, the HTML element will alter as the Vue object changes.

Example

<div id="app">
[[ message ]]
</div>
<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hi Vue!'}
})
function myFunction() {
    myObject.message = "John";
}
</script>

Working with Form elements

To make the model modify when the change event occurs, & not any time the user presses a key, the user can use “v-model.lazy” as a substitute to” v.model”. Working with input fields, “v-model.trim” is quite useful as it automatically removes whitespace.  If you accept a number as a replacement to a string, ensure to use “v-model.number”.

Modifying events

Use “click” for possible events.

• v-on:click.stop: Stop the click event propagation
• v-on:click.once: The event will only get triggered exactly once

Lifecycle Hooks

• beforeCreate: Called before the app is created
• Created: Called after the app is created
• beforeMount: Called before the particular app is mounted on the DOM
• mounted: Called after the particular 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 gets activated
• deactivated: Called when a kept-alive component gets 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 properties as listed in the table given below, and these can be modified when the instance is created:

Start a 7-day FREE TRIAL at QuickStart.com and start your certification journey today!

Vue instance asset

• Directives: The set of directives to link to the Vue instance
• Filters: The set of filters to link to the Vue instance
• Components: The set of components to link with the Vue instance.

Methods of the Vue object

Vue Composition Options

• Parent: Specifies the parent instance
• Mixins: Sets an array of mixin objects
• Extends: Extend another component

DOM

• el: It will set the DOM element where the instance will mount on. It can be an HTMLElement or a CSS Selector,
• Template: Itis signified as a string, that will replace the mounted element
• Render: It is to define the template, you can describe a template using a render function

Instance Properties

Given an instance of Vue, kept into a variable i.e. const vm = new Vue(/*...*/), you can review & interact with it.

Properties of a Vue instance

• $data: The data object is mainly linked with the instance
• $props: The props the instance has received
• $options: The object is mainly used to instantiate the Vue instance
• $parent: The parent instance
• $root: The root instance (the root instance, this points to itself)
• $children: It is an array of children instances
• $slots: An array of the linked slots contained in the template
• $scopedSlots: An array of the linked scoped slots
• $refs: An object which contains a property for every element pointed by a refattribute stated in the template
• $isServer: True if the Vue instance is running on a particular server (beneficial in server-side rendering)
• $attrs: An object of attributes that are delivered to the component but not defined as props
• $listeners: An object of v-on event listeners which is allocated to the component

Want to know more? Talk to experts