Vue.js Tutorial

Vue.js tutorial provides basic and advanced concepts of Vue.js. Our Vue.js Tutorial is designed for beginners and professionals both.

Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications. Vue.js is mainly focused on the view part of the application that is also called front end development. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces.

In this tutorial, you will learn what is Vue.js, how to install Vue.js, Vue.js Instances, Components, Properties, Bindings, Events, Rendering, Directives, Routing, Mixins, Render functions etc.

What is Vue.js?

Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue and pronounced as "view.js" or "view."

next → Vue.js Tutorial Vue.js tutorial provides basic and advanced concepts of Vue.js. Our Vue.js Tutorial is designed for beginners and professionals both. Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications. Vue.js is mainly focused on the view part of the application that is also called front end development. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces. In this tutorial, you will learn what is Vue.js, how to install Vue.js, Vue.js Instances, Components, Properties, Bindings, Events, Rendering, Directives, Routing, Mixins, Render functions etc. What is Vue.js? Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue and pronounced as "view.js" or "view." What is a Single Page Application (SPA)? A single page application or SPA is a web application or a website that provides users a very fluid, reactive, and fast experience similar to a desktop application. A single page application contains a menu, buttons, and blocks on a single page. When a user clicks on any of them, it dynamically rewrites the current page rather than loading entire new pages from a server. That's the reason behind its reactive fast speed. Vue is basically developed for frontend development, so it has to deal with a lot of HTML, JavaScript, and CSS files. Vue.js facilitates users to extend HTML with HTML attributes called directives. Vue.js provides built-in directives and a lot of user-defined directives to enhance functionality to HTML applications. History of Vue.js Vue.js was created by Evan You, who was then working for Google using AngularJS in their projects. He extracted some parts of AngularJS and built something lightweight JavaScript framework later released as Vue.js. The first version of Vue.js was released in February 2014. It is now maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces. All released versions of Vue.js Following is the list of all the released versions of Vue.js: Version Release date Title of the version 0.6 Dec 8, 2013 N/A 0.7 Dec 24, 2013 N/A 0.8 Jan 27, 2014 N/A 0.9 Feb 25, 2014 Animatrix 0.10 Mar 23, 2014 Blade Runner 0.11 Nov 7, 2014 Cowboy Bebop 0.12 Jun 12, 2015 Dragon Ball 1.0 Oct 27, 2015 Evangelion 2.0 Sep 30,2016 Ghost in the Shell 2.1 Nov 22, 2016 Hunter X Hunter 2.2 Feb 26, 2017 Initial D 2.3 Apr 27, 2017 JoJo's Bizarre Adventure 2.4 Jul 13, 2017 Kill la Kill 2.5 Oct 13, 2017 Level E 2.6 Feb 4, 2019 Sword Art Onlin: Alicization Features of Vue.js Following is the list of most prominent features of Vue.js: Components Vue.js Components are one of the important features of this framework. They are used to extend basic HTML elements to encapsulate reusable code. You can create reusable custom elements in Vue.js applications that can be later reused in HTML. Templates Vue.js provides HTML-based templates that can be used to bind the rendered DOM with the Vue instance data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML parsers. Vue.js compiles the templates into Virtual DOM render functions. Vue renders components in virtual DOM memory before updating the browser. Vue can also calculate the minimum number of components to re-render and apply the minimum amount of DOM manipulations when you change the application's state. Reactivity Vue provides a reactivity system that uses plain JavaScript objects and optimizes re-rendering. In this process, each component keeps track of its reactive dependencies, so the system knows precisely when, and which components to re-render. Routing Navigation between pages is performed with the help of vue-router. You can use the officially-supported vue-router library for your Single Page Application or if you only need a simple routing and do not want to use the full-featured router library, you can do this by dynamically rendering a page-level component as following: const NotFound = { template: '<p>Page not found</p>' }   const Home = { template: '<p>home page</p>' }   const About = { template: '<p>about page</p>' }   const routes = {     '/': Home,     '/about': About   }   new Vue({     el: '#app',     data: {       currentRoute: window.location.pathname     },     computed: {       ViewComponent () {         return routes[this.currentRoute] || NotFound       }     },     render (h) { return h(this.ViewComponent) }   })   Transitions Vue allows you to use different transition effects when the items are inserted, updated, or removed from the DOM. Prerequisites Before learning Vue.js in depth, you must have the basic knowledge of HTML, CSS, and JavaScript. Audience We have developed this Vue.js tutorial for beginners and professionals both. Problem We assure you that you will not find any problem in our Vue.js tutorial. But, if you find any mistake, you can post it in our comment section.

Read More

Vue.js Tutorial

Vue.js tutorial provides basic and advanced concepts of Vue.js. Our Vue.js Tutorial is designed for beginners and professionals both.

Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications. Vue.js is mainly focused on the view part of the application that is also called front end development. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces.

In this tutorial, you will learn what is Vue.js, how to install Vue.js, Vue.js Instances, Components, Properties, Bindings, Events, Rendering, Directives, Routing, Mixins, Render functions etc.

What is Vue.js?

Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue and pronounced as "view.js" or "view."

next → Vue.js Tutorial Vue.js tutorial provides basic and advanced concepts of Vue.js. Our Vue.js Tutorial is designed for beginners and professionals both. Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications. Vue.js is mainly focused on the view part of the application that is also called front end development. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces. In this tutorial, you will learn what is Vue.js, how to install Vue.js, Vue.js Instances, Components, Properties, Bindings, Events, Rendering, Directives, Routing, Mixins, Render functions etc. What is Vue.js? Vue.js is an open-source progressive JavaScript framework used to develop interactive web user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue and pronounced as "view.js" or "view." What is a Single Page Application (SPA)? A single page application or SPA is a web application or a website that provides users a very fluid, reactive, and fast experience similar to a desktop application. A single page application contains a menu, buttons, and blocks on a single page. When a user clicks on any of them, it dynamically rewrites the current page rather than loading entire new pages from a server. That's the reason behind its reactive fast speed. Vue is basically developed for frontend development, so it has to deal with a lot of HTML, JavaScript, and CSS files. Vue.js facilitates users to extend HTML with HTML attributes called directives. Vue.js provides built-in directives and a lot of user-defined directives to enhance functionality to HTML applications. History of Vue.js Vue.js was created by Evan You, who was then working for Google using AngularJS in their projects. He extracted some parts of AngularJS and built something lightweight JavaScript framework later released as Vue.js. The first version of Vue.js was released in February 2014. It is now maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru. Vue.js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces. All released versions of Vue.js Following is the list of all the released versions of Vue.js: Version Release date Title of the version 0.6 Dec 8, 2013 N/A 0.7 Dec 24, 2013 N/A 0.8 Jan 27, 2014 N/A 0.9 Feb 25, 2014 Animatrix 0.10 Mar 23, 2014 Blade Runner 0.11 Nov 7, 2014 Cowboy Bebop 0.12 Jun 12, 2015 Dragon Ball 1.0 Oct 27, 2015 Evangelion 2.0 Sep 30,2016 Ghost in the Shell 2.1 Nov 22, 2016 Hunter X Hunter 2.2 Feb 26, 2017 Initial D 2.3 Apr 27, 2017 JoJo's Bizarre Adventure 2.4 Jul 13, 2017 Kill la Kill 2.5 Oct 13, 2017 Level E 2.6 Feb 4, 2019 Sword Art Onlin: Alicization Features of Vue.js Following is the list of most prominent features of Vue.js: Components Vue.js Components are one of the important features of this framework. They are used to extend basic HTML elements to encapsulate reusable code. You can create reusable custom elements in Vue.js applications that can be later reused in HTML. Templates Vue.js provides HTML-based templates that can be used to bind the rendered DOM with the Vue instance data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML parsers. Vue.js compiles the templates into Virtual DOM render functions. Vue renders components in virtual DOM memory before updating the browser. Vue can also calculate the minimum number of components to re-render and apply the minimum amount of DOM manipulations when you change the application's state. Reactivity Vue provides a reactivity system that uses plain JavaScript objects and optimizes re-rendering. In this process, each component keeps track of its reactive dependencies, so the system knows precisely when, and which components to re-render. Routing Navigation between pages is performed with the help of vue-router. You can use the officially-supported vue-router library for your Single Page Application or if you only need a simple routing and do not want to use the full-featured router library, you can do this by dynamically rendering a page-level component as following: const NotFound = { template: '<p>Page not found</p>' }   const Home = { template: '<p>home page</p>' }   const About = { template: '<p>about page</p>' }   const routes = {     '/': Home,     '/about': About   }   new Vue({     el: '#app',     data: {       currentRoute: window.location.pathname     },     computed: {       ViewComponent () {         return routes[this.currentRoute] || NotFound       }     },     render (h) { return h(this.ViewComponent) }   })   Transitions Vue allows you to use different transition effects when the items are inserted, updated, or removed from the DOM. Prerequisites Before learning Vue.js in depth, you must have the basic knowledge of HTML, CSS, and JavaScript. Audience We have developed this Vue.js tutorial for beginners and professionals both. Problem We assure you that you will not find any problem in our Vue.js tutorial. But, if you find any mistake, you can post it in our comment section.

Read More

Vue.js Tutorial

 Vue.js Installation

Compatibility Check

Before going to install and use Vue.js in your project, you should check the compatibility issues. Vue does not support IE8 and below versions of IE, because it uses ECMAScript 5 features not supported in IE8. It supports all the ECMAScript 5 compliant browsers.

How to install Vue.js?

There are several methods to use Vue.js. You can install it by going to its official site or can start using the Vue.js file from the CDN library also. Here, we are going to discuss some ways on how to install and use Vue.js in your project.

By using the <script> tag directly in HTML file

If you want to use the <script> tag of Vue.js directly in your HTML file then you have to download it from the official website.

1. <html>  
2.    <head>  
3.       <script type = "text/javascript" src = "vue.min.js"></script>  
4.    </head>  
5.    <body></body>  
6. </html>  

Let's go ahead to the official website of Vue.js https://vuejs.org/v2/guide/installation.html and download the vue.js according to your requirement. Here, you will get two versions of Vue.js to use- development version and production version.

The following image shows both versions:

The development version is best to use in your project because it is not minimized, and helps you with the warnings and debug mode during the development of the project. On the other hand, the production version is minimized, as shown in the above screenshot.

Vue.js recommends that you not use the minified version during development because it doesn't show the warnings for common mistakes during the development of the project.

By Using CDN

You can also use the Vue.js file from the CDN library in your application. Use this link https://unpkg.com/vue within <script> element in your application, and you will get the latest version of Vue.js.

Example 1:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>My first Vue app</title>  
5.   <script src="https://unpkg.com/vue"></script>  
6. </head>  
7. <body>  
8.   <div id="app">  
9.     {{ message }}  
10.   </div>  
11.   <script>  
12.     var app = new Vue({  
13.       el: '#app',  
14.       data: {  
15.         message: 'Vue.js example with CDN'  
16.       }  
17.     })  
18.   </script>  
19. </body>  
20. </html>  

Output:

Vue.js example with CDN 

You can also get Vue.js on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) and cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Example 2:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>My first Vue app</title>  
5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
6. </head>  
7. <body>  
8.   <div id="app">  
9.     {{ message }}  
10.   </div>  
11.   <script>  
12.     var app = new Vue({  
13.       el: '#app',  
14.       data: {  
15.         message: 'Vue.js second example with CDN'  
16.       }  
17.     })  
18.   </script>  
19. </body>  
20. </html>  

Output:

Vue.js second example with CDN 

By Using NPM

NPM is recommended to use if you want to make a large scale application with VueJS. Use the following command to install the Vue.js using the npm package. It comes with Browserify and Webpack, along with other necessary tools that make development easy.

1. npm install vue   

Note: Don't use this method if you are not yet familiar with Node.js-based build tools.

By Using CLI Command Line

You can also install Vue.js by using CLI and get started with the server activation. Use the following command to install Vue.js using CLI:

1. npm install --global vue-cli   

It will take a few minutes to install Vue.js cli. Once it is done, it will show the CLI version for Vue.js.

1. + vue-cli@2.9.6  
2. added 238 packages from 205 contributors in 346.282s   
3. 
   
   

   
   

4. Create a project using Webpack

   Use the following command to create a project using Webpack. Here, we are going to create a project named "my_project".

   1. vue init webpack my_project   

   During this process, you will be asked to type Y/n. type Y and proceed further. It will automatically download the template and all dependencies.

After creating your project successfully, you will see a message like the following screenshot.

Start the project and Server

• Now, the project is created. Go to the project directory by using the following command:

1. cd my_project  

• Use the following command to start the Server:

1. npm run dev   

You can see that after running the npm run dev command, the Server is started. Now, open the compatible browser i.e., Google Chrome, and run the localhost http://localhost:8080/#/ to open your project.

Read More