Questions in: Vue.js

A Vue plugin helps developers in building and adding a global level functionality to Vue. This can be used to write globally accessible properties and methods, options, assets, mixins and other custom API’s to an application.

The “Virtual Document Object Model” or v-DOM is extremely different than the actual DOM. The v-DOM is an in memory representation of the underlying node (data structures) that the Vue js runtime engine processes different checks against prior to actually inform the DOM that an update is needed.

Mixin allows us to write reusable and pluggable functionalities for components in Vue. If are equipped with a set of components like methods and lifecycle hooks etc. which you wanted to use across multiple components, you can define it as mixin and simply reference it in the component.

Vue enables you to make use of HTML tags and attributes to manage and alter the view of the application. This includes setting attributes dynamically like href and alt. Vue allows you to render components and tags based on the data in the application.

The following reasons make Vue JS so popular among others:

Vue JS is a light weight, modular, flexible and performs efficiently.
It makes the development process easy and smooth.
The most important factor is its learning curve.
It is equipped with the best tools, organized state management and routing.
This framework solves critical problems and provides incredible development speeds

When compared to other frameworks like Angular and React, React JS and Vue JS provide similar features. Below are some of them:
<ul>
<li>Make use of a virtual DOM.</li>
<li>Provide composable and reactive view components.</li>
<li>Maintain focus in the core library, with concerns such as routing and global state management.</li>
</ul>

Vue JS is basically pronounced as view, it is progressive framework useful in building UI’s.

Vue.js is small, versatile and approachable framework. If you are aware of CSS, HTML and JavaScript then you are good to go with developing Vue JS apps in no time.

In Vue JS the render function essentially returns a virtual DOM node which will be rendered by Vue in the browser DOM.
A <b>virtual Document Object Model (or 'DOM')</b> allows Vue to render the component in its memory before updating the browser. This makes everything faster as there are fewer interactions with the browser.

Following are the classes:
● v-enter
● v-enter-active
● v-leave
● v-leave-active

Vue JS has built in function which can be applied to HTML DOM element for the transition to take place.

It will render over the list of array with v-for directive loop.

V-if removes the element from the DOM if the condition is false and adds back if its true. Whereas v-show hides the element if condition is false using display:none thus DOM element is always present.

Here if certain condition met then only the output will be displayed. These condition checks is done with the help of v-if, v-else, v-show etc.

This is an attribute which can be added to the DOM elements to listen to different events.

In order to bind HTML classes we can use v-bind: class

It is used to update the values without any specific events and extra validation.

These are created using keyword component.

<component v-bind:is = "view"></component>

These are the components that are used to create custom reusable elements.
<p class="card-text">Example:</p>

<pre> <div id = "component_test">
<test></test>
</div>

Vue.component('test',{
template : '<div><h1>This is sample program</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});</pre>

The v-for directive is being used to bind an array of Vue objects to an "array" of HTML element.

The v-model directive binds the value of HTML elements to application data. This is also known as two-way binding in Vue JS.
Two-way binding means that any data related changes affecting the model are immediately propagated to the matching view(s), and any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model.

Example:
<div id="app">

{{ message }}

<input type="text" />

</div>