Learn Vue.Js

From many popular front end frameworks used by developers.Vue.js is a front-end framework that aims to combine the best aspects of these frameworks. Vue.js is a progressive javascript framework approachable and versatile.

Vue.js is developed by “Evan You”.vue is a progressive framework for building user interface unlike another monolithic framework,vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects.

On the other hand, Vue is also perfectly capable of powering sophisticated single-page applications. when used in combination with modern tooling and supporting libraries or existing projects.

What you need to know before you start?

Intermediate level of knowledge of HTML, CSS, and Javascript.

If you are totally new to frontend development I would recommend getting your hand on the basics of javascript.

How to construct component and nested component, how vue reactively keeps the DOM up-to-date when data is change.

Core concept of Vue.JS

·       Template syntax

·       Computed properties and watchers

·       Class and style binding

·       Conditioning Rendering

·       List Rendering

·       Event handling

·       Form input-binding

·       Routing state management

·       Rendering

·       Custom Directive

 Let's get started with the installation

·       How to install local web server for a visual studio code editor

·       How to install Vue JS

 

Core concepts of Vue.Js

Template Syntax –vue.js uses an HTML based template syntax that allows you to declaratively bind the rendered DOM to the underlying vue instance data.

Interpolations – Most basic form of data binding is text interpolation using “Mustactic” syntax

<span>Message :{{msg}}</span>

 Events &Methods in VueJS

Why to use Vue?

·       Extremely fast & lightweight

·       Less learning curve than other frameworks

·       Build powerful SPA Apps

·       Virtual DOM

·       Growing in industry

Reusable Components

Functionality

[code]

<script>

Export default{

Name:’user’

Data(){

Return{

User”{name:’bhawna’}

}

}

}

</script>

 Style

<style>

h1{

font size :4rem;

}

</style>

[/code]

Output

[code]

<template>

<div class =”user”>

<h1>{{user.name}}</h1>

</div>

</template>

[/code]

 

Vue-CL13

·       This is a beautiful tool to generate and build Vue App.

·       Features include typescript, babel, or more.

·       Includes vue UI tool to manage your app in a graphical interface.

Computed properties and watchers

Expressions are very convenient, they are meant for simple operations.

[code]

For e.g.

<div id =”msgexample”>

{{message.split(‘‘).reverse().join(‘’)}}

</div>

The template is no longer simple and declarative

<div id=”example”>

<p>original :”{{message}}”</p>

<p>Computed reverse message: “{{reversedMessages}}”</p>

</div>

[/code]

Javascript Code

[code]

Var x= new vue({

El:’example’,

Data:{

Message: ‘Hello’

};

Computed:{

reversedMessage:function(){

return this.message.split(‘’).reverse().join(‘’)

}

}

})

[/code]

OutPut

HELLO

OLLEH

Value of the reversed message is always depend on the message property hence

Vm.reversedMessage always changes with changes to Vm.message.

 Computed Coaching VS Method

HTML

[code]

<p>Reversed Message :”{{reversedMessage()}}”</p>

Javascript

//in comment

Method :{

reversedMessage : function(){

return this.message.split(‘’).reverse().join(‘’)

}

}

[/code]

In this method to achieve the same result as a computed property. A computed property will re-evaluate only when some of its reactive dependencies change, thus multiple access to the reversedMessage will return compiled results without running the function again.

 Computed Vs Watched Property

Vue provides a watch property that is a more generic way to observe and rest to data changes on the vue instance.

 HTML

[code]

<div id =”demo”>{{fullName}}</div>

Javascript

Var a = new vue ({

El: ‘#demo’;

Data:{

firstName : ‘Bhawna’,

LastName :’Tiwari’

fullName :’Bhawna Tiwari

},

Watch :{

firstName:function(val){

this.fullName=val+’’+this.lastName

},

lastName:function(val){

this.fullName=this.firstName+’ ‘ +val

}

}

})

[/code]

Computed Property

[code]

var a = new vue({

el: ‘#demo’,

Data:{

firstName : ‘Bhawna’

lastName : ‘Tiwari’

},

Computed:{

fullName:function(){

return this.firstName+’ ‘ +this.lastName

}

}

})

[/code]

Computed Setter

Computed properties are by default getter only you can provide a setter when needed

[code]

Computed:{

fullName:{

get:function(){

return this.firstName+’ ‘+ this.lastName

}’

Set:function(newValue){

var names= newValue.split(‘ ‘)

This.firstName=names[0]

This.lastName= names[names.length-1]

}

}

}

[/code]

Watchers

Computed properties are more appropriate in many cases, this is the reason Vue provides us with the watch option

e.g.

<div id= “watch-example”>

 Class and style binding:

Common need foe data binding is manipulating an elements class list and inline styles. Vue provides a special enhancements when v-bind is used with class and style.

 Object syntax

<div v-bind :class= “{active “ isActive}’></div>

Presence of the active class will be determined by the truthiness of the data property isActive.

[code]

<div class = “static” v-bind:class=”{active:isActive,’text-danger’:hasError}’></div>

And following the data

Data:{

isActive :true

hasError;false

}

It will render

<div class =”static active”></div>

[/code]

Array Syntax

[code]

We can pass an array to v-bind:class

<div v-bind:class =”[activeClass,errorClass]”</div>

Data :{

activeClass : ‘active’,

errorClass : ‘text-danger’

}

 Which will render

<div class =”active text-danger”></div>

If you like to toggle a class in the list conditionally you can use a ternary expression

<div v-bind:class =”[isActive ?activeClass:”,errorClass]”></div>

[/code]

This always applies errorClass , only if isActive is true.when you use the class attribute on a custom component, those classes will be added to the components root element.

For e.g

Declaring this component

vue.Component(my-component’{Template:<p class =”chocolate”>Hi</p>

})

 Conditional Rendering

The declarative v-if is used to conditionally render a block.This will rendered when expression return a true value.

[code]

<h1 v-if=”awesome”>Vue is awesome!</h1>

We can add “else block” with v-else:

<h1 v-if=”awesome”>Vue is awesome!</h1>

<h1 v-else>Not good </h1>

[/code]

Conditional groups with v-if on <template>

v-if is a directive, it is attached to a single element.if we want to toggle more than one element?

[code]

<template v-if =”ok”>

<h1>Title</h1>

<p>Paragraph</p>

</template>

v-else

<div v-if =”Math.random()>1”>

Look at this

</div>

<div v-else>

Look at that

</div>

v-else element immediately follow

v-if or a v-else-if element otherwise

v-else-if

v-else-if,as name suggest works as “else if block”

for v-if

<div v-if=”type === ‘1’”>

1

</div>

<div v-else-if =”type ===’2’”>

2

</div>

<div  v-else>

0

</div>

[/code]

List Rendering

Mapping an array to elements with V-for

We use v-for directive to render a list of an array.This v-for requires a syntax in the form of items,where items is the source data array.

[code]

<u1 id =”Number-1”>

<li v-for=”List of items”: key =”item.message”>

{{ item.message }}

</li>

</u1>

Var number 1 =new Vue({

e1: ‘number-1’,

data : {

items :[

{ message : ‘chocolate’},

{message : ‘candy’}

]

}

})

[/code]

Result

·        Chocolate

·        Candy

These are the few concepts including example vue.js.

let's dig and explore more on this through our website with details of this course.