Vue js Tutorial in hindi

What is Vue js ?

Vue js is a frontend framework of javascript. It is still not popular like  Angular Js. It is similar as an angular js framework. Vue js framework is lightweight framework and the size is 18-21 KB. It's also used for design a  single page application. Vue js is having high run time performance. it is very fast framework than angular js.

Vue Js History

Vue js was developed by Evan in February 2014 and also managed by him and rest of present team members those coming from other companies like Netlify and Netguru. it's initial version released in feb 2014 , and now current version available 2.6.11. Vue js is also open source framework like an angular js and React js. It's mostly used with NPM (Node package manager) or you can use with NPM also.

Vue js with CLI (Command line interface) 

Vue js with command line interface used for development , build and serve etc. CLI can't use with CDN and with package manager.

Vue js with Laravel :

Vue js is best compatibility with laravel. we use vue js for interface design and laravel for backend development.  if you want full stack developer . then Vue js with Laravel is best combination for backend language.

Vue.js Vs Angular Js : 

There are a few reasons to use Vue.js over Angular, although they might not apply for everyone:

•  Vue.js is easier in API and design than Angular js. You can learn very easily almost everything about vue js.
• Angular uses two-way binding between scopes and Vue also supports explicit two-way bindings.
• Vue.js has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while Components stand for a self-contained unit that has its own view and data logic. In Angular there’s a lot of confusion between the two.
• Vue.js has better performance than angular js . Vue js is much, much easier to optimize, because it doesn’t using dirty checking. Angular js gets very slow when there are a lots of watcher, because every time anything changes in scope, all these watchers need to re-evaluated again.

Vue.js Vs React Js :

• Vue.js and React do share a similar in that they both provide reactive & composable View components. There are also having lots of differences as well. Both is having the internal implementation is totally different.
• React is rendering leverages the Virtual DOM - Instead of a Virtual DOM,
• Vue.js uses the actual DOM as the template and keeps references to actual nodes for data bindings.
• The React team has very ambitious goals in making React a platform-agnostic UI development paradigm, while Vue.js focus on provide a pragmatic solution for the web.
• React is having functional nature, that'swhy it's playing very well with functional programming patterns. However it also introduces a high learning barrier for junior  and beginners developers. Vue js is much easier to pick up and get productive with in this regard.

Vue js vs Ember Js :

Ember is a fully featured framework that is designed to be highly opinionated. It provides a lot of established conventions, and once you are familiar enough with them, it can make you very productive.

• Vue.js provides unobtrusive reactivity on plain JavaScript objects, and fully automatic computed properties. In Ember you need to wrap everything in Ember Objects and manually declare dependencies for computed properties.
• Vue.js template syntax harnesses the full power of JavaScript expressions, while Handlebars’ expression and helper syntax is quite limited in comparison.
• Performance wise, Vue outperforms Ember by a fair margin, even after the latest Glimmer engine update in Ember 2.0. Vue automatically batches updates, while in Ember you need to manually manage run loops in performance-critical situations.

Vue Js Fundmentals :

Install Vue js  : 

You can download from website which is given in following :

1. Development Version from http://vuejs.org/js/vue.js¹

2. Production Version from http://vuejs.org/js/vue.min.js²

Vue js Directives :

A directive is some special token (Special attribute) in the HTML that tells the library to do something to a DOM element. It means Directive are some HTML attribute which is used inside the template and they are started from v- .  v- is indicate that vue special attribute. In Vue.js, the concept of directive is drastically simpler than that in Angular. Some of the directives are :

• v-show : It is used to conditionally display an element
• v-if : It can be used instead of v-show
• v-else :  It displays an element when v-if or v-show evaluates to false.

Filters in Vue Js :

Filters makes globally in vue js and  don't need to import any other file. Filters in Vue js is using for change of output display data. Like as any output , if we need to change output in uppercase or lowercase and change currency dollor to INR etc. 

See example in tutorials. 

Props in Vue js:

Props is known as properties , we pass props in component like parameter pass in functions. props is the way to pass the data from parent component to child component.

See all things how to create props in videos tutorial.

Routing in Vue js:

Routing is the method which allows to user switch one page to another page without loading a webpage.  we also define routers and how to create and all in videos tutorials please check and enroll course . 

List Rendering in Vue Js :

V-for use for rendering a list of item based on array. The v-for directive allows us to iterate over an array to display data. We used an alias for the items in the array being iterated on, and we specify the name of the array we are looping through.

Ex: v-for="product in products"

we are using directive to render elements 

• Render a list of items based on an array.
• Repeat a template.
• Iterate through the properties of an object.
• Filter an array of items. 
• Order an array of items. 
• Apply a custom filter to a list.

Interactivity in Vue Js : 

In this section we will learn new thing concerning 'event handling', 'methods' and 'computed properties'. 

Event Handling :  

In HTML events are things that happen into HTML elements. When we used Vue.js in HTML pages, it can react events. In HTML, events can demonstrate everything from basic user interactions to things happening into rendering model. Some examples of HTML events are following:

•  A web page loading has  finished .
• An input field changed .
• Any button was clicked.
• Any form was submitted.

Vue js Component :

A piece of code that is reusable for creating a specific task. We can say one section will be components.  It is most efficient Feature of Vue.js. It extend to basic html elements to encapsulated reusable code.

Using Components : 

Vue.component ('story', { 
 template: 'My name is anil!'  
});

Class and Style Binding :

Class Binding : 

The need of data binding is manipulating an element's class and it's style. In case we can use  

v-bind:class

we can also use multiple class to an element using an array of classnames. 

Style binding :

Object style for v-bind:style is straightforword. It looks like CSS. 

    
data : {
goodStyle:{
color:red
font-size:'14'
}
}

Integrating Vue Resources : 

Vue-resource is a plugin for vue.js. It's provide services for making web request and handing respponse using an XMLHTTP Request or JSONP.

Add vue-resource bu using this command. 

$ npm install vue-resourse --save 

After that open main.js file and import this

import vue Resource from 'vue-resource'

In this tutorial we will also explain about vue js interview questions.....