VueJS

What is vue.js?

Is a progressive javascript framework for building user interfaces. The core library is focused on the view layer only.

Progressive:

● Approachable: Know html, css and javascript will make you do apps.

● Versatile: It is simple, minimal core and can handle apps of any scale.

● Performant: It has a fast virtual DOM with total library file size 16 mb + gzip.

Declarative Rendering

Conditional Rendering

List Rendering

Installation

npm install vue

There are two builds available, the standalone build and the runtime-only

build:

● The standalone build includes the compiler and supports the template

option.

● The runtime-only build does not include the template compiler, roughly

30% lighter-weight than the standalone build.

The Vue Instance

Every vue app must have this: new Vue({ }) , that is the constructor.

Or

var MyComponent = Vue.extend({ }) if you want to create a component.

For more info check Life Cycle Diagram

Template Syntax

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Template Syntax ( Interpolations )

● Text: <span>Message: {{ msg }}</span> “Mustache” syntax (Plain text).

● Raw HTML: <div v-html="rawHtml"></div> “directive” (HTML).

● Attributes: <div v-bind:id="dynamicId"></div> “directive”.

● Filters: {{ message | capitalize }} are functions inside filters object to

change text format.

Template Syntax (Directives)

Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception for v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes.

<p v-if="seen">Now you see me</p>

Template Syntax (Directives - Arguments)

Some directives can take an “argument”, denoted by a colon after the directive name. Example:

<a v-bind:href="url"></a>

v-on directive, which listens to DOM events:

<a v-on:click="doSomething">

Components

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.

State Management

Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them.

To help solve this problem, we can adopt a simple store pattern:

Demo App

Let us see how vue works in a project

Thank You