Getting started with Vue.js

 Getting started with Vue.js

In the previous chapter, we have seen several ways to use and install Vue.js in your project. In this article, we shall see how to check the version of the Vue.js, the advantages and disadvantages of using Vue.js in your project, the first example and the explanation of all the general points related to the example.

Advantages of using Vue.js

Vue.js is one of the newest software technologies widely used for web development and building single-page applications. As you can guess by its name, it is used primarily for UI or view side of the project. It is a JavaScript based framework developed by Evan You (a former Google employee who was then working on Angular) for building the rich client-side application using JavaScript. Let's see the advantages of using Vue.js in your project:

Following is the list of advantages of using Vue.js:

Very Small in Size

One of Vue.js' biggest advantages is that it is very small in size. The success of a JavaScript framework very much depends on its size and this exciting JavaScript plug-in is only 18-21KB, so you can download and use it very easily in no time.

Easy to Understand and Code

The Vue.js framework has a very simple structure and very easy to understand. It is one of the reasons for the popularity of this framework. If you are familiar with HTML and JavaScript, you can easily code in Vue.js. The users can easily add Vue.js to their web project because of its simple structure and develop applications.

Simple Integration with Existing Applications

Vue.js has a lot of components for everything and can be integrated with the existing applications very quickly. You can integrate it with any application that is written in JavaScript.

Flexible in nature

Vue.js's flexible nature also makes it easy to understand for the developers of React.js, Angular.js, and any other new JavaScript framework. It provides a lot of flexibility to use virtual nodes to write HTML files, JavaScript files, and pure JavaScript files.

Components

You can create reusable custom elements in Vue.js applications.

Easy, comprehensive & detailed documentation

Vue.js provides very easy, comprehensive, and detailed documentation, so the developers who have little idea about HTML and JavaScript can use it to code.

Virtual DOM

Vue.js uses virtual DOM similar to other existing frameworks such as ReactJS, Ember, etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the initial DOM.

Two-Way Communication

Vue.js provides two-way communications with its MVVM architecture that makes it very easy to handle HTML blocks.

Companies which are using Vue.js

Vue.js has started gaining popularity day by day because famous companies have already started using it in real-time. There are several companies which are successfully using Vue.js in the real scenario. Let's see some example:

Facebook: The biggest successful company which is using Vue.js in their real-life project is Facebook. Facebook is using this framework for the marketing side of their Newsfeed.

Adobe: Adobe is using Vue.js for its product called Portfolio. Using the Vue.js framework's easy integration advantage, the company has already migrated their existing codebase to the Vue.

Xiaomi: Xiaomi is also using Vue.js to build their products catalog to provide users a reactive experience.

Alibaba: One of the most significant public companies in China has used Vue.js.

Some other notable companies which are using Vue.js in their project are:

• Grammarly
• Netflix
• Laracast
• Behance
• Gitlab
• Euronews
• Codeship
• Livestorm
• Wizzair etc.

Check the version of your installed Vue.js

If you are already familiar with Node.js and have installed Vue.js CLI on your system, you can check the version of your installed Vue.js using the following command on your Node.js command prompt:

• Open the Node.js command prompt and run the following command:

1. vue --version  

• If it responds well, go ahead to the next step to create your new project. In the above example, you can see that Vue.js version 2.9.6 is installed successfully. Now, run the following command to create a new project:

Syntax:

1. vue create <YourAppName>  

• Run the vue create myfirstapp command to create an app named

• You have seen an error that vue create command works only with Vue CLI 3, and you are using an older version. Now, use the following command to uninstall the older version and install the new one.

1. npm uninstall -g vue-cli  
2. npm install -g @vue/cli  

• You can see that the older version of Vue.js is uninstalled. Now, install the newer version.

• Now, the newer version of Vue CLI is installed. You can check the Vue CLI version by using the vue --version

• You can see that the latest Vue CLI version is installed. Now, run the vue create myfirstapp command to create an app named

Create Vue.js first app (Using vue create command)

• Run the vue create myfirstapp command on Node.js command prompt.

• This process may take some time. Wait until the creating app process is completed. After the successful completion, you will get a message on the command line that the project is successfully created.

• Now, go to your application's location by executing the following command.

1. cd myfirstapp  

• Execute the following command to run your Vue.js app on the browser.

1. npm run serve  

• Here, you can see that your app is compiled successfully, and the development server is started. Copy the local address and paste it on your Google Chrome browser to open the app.

Explore Folder structure of Vue Application

You have already executed your app on the web browser. Now, it's time to explore the complete files and folders of your project. You can select any IDE of your choice. Here, we have chosen Visual Studio Code IDE for deploying our application.

Open the Visual Studio Code and load your project in the IDE. After loading your project, click on the public folder as well as the src folder. These two folders contain the most important files of your project.

Package.json: The Package.json folder contains all configuration of your app. You don't need to touch that folder.

Index.html: The most important file of your app is index.html file. It contains all the data that is appeared on the UI of your app. This is the only one div element which Vue will use to attach the DOM. See the index.html file:

1. <!DOCTYPE html>  
2. <html lang="en">  
3.   <head>  
4.     <meta charset="utf-8">  
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">  
7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">  
8.     <title><%= htmlWebpackPlugin.options.title %></title>  
9.   </head>  
10.   <body>  
11.     <noscript>  
12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>  
13.     </noscript>  
14.     <div id="app"></div>  
15.     <!-- built files will be auto injected -->  
16.   </body>  
17. </html>  

Src/main.js: main.js is the main JavaScript file which is used to drive your app.

1. import Vue from 'vue'  
2. import App from './App.vue'  
3. Vue.config.productionTip = false  
4. new Vue({  
5.   render: h => h(App),  
6. }).$mount('#app')  

In the above code of main.js, the first line specifies the import of the Vue library, and the second line is used to import the App Component from app.vue. The productionTip is set to false to avoid the message "you're in development mode" in the console. After that, Vue instance is created by assigning it to DOM element #app, which has already been defined in index.html file and specified to use the App component.

Src/App.vue: The App.vue is single file component that contains three parts: HTML, CSS and JAVASCRIPT. It is used to manage the single file components of your app.

1. <template>  
2.   <div id="app">  
3.     <img alt="Vue logo" src="./assets/logo.png">  
4.     <HelloWorld msg="Welcome to Your Vue.js App"/>  
5.   </div>  
6. </template>  
7. <script>  
8. import HelloWorld from './components/HelloWorld.vue'  
9.   
10. export default {  
11.   name: 'App',a  
12.   components: {  
13.     HelloWorld  
14.   }  
15. }  
16. </script>  
17. <style>  
18. #app {  
19.   font-family: Avenir, Helvetica, Arial, sans-serif;  
20.   -webkit-font-smoothing: antialiased;  
21.   -moz-osx-font-smoothing: grayscale;  
22.   text-align: center;  
23.   color: #2c3e50;  
24.   margin-top: 60px;  
25. }  
26. </style>  

Src/component/HelloWorldComponent: This file is included in HelloWorld.vue file. This file contains all the style and HTML which you see when you open your app in the browser.

1. <style scoped>  
2. h3 {  
3.   margin: 40px 0 0;  
4. }  
5. ul {  
6.   list-style-type: none;  
7.   padding: 0;  
8. }  
9. li {  
10.   display: inline-block;  
11.   margin: 0 10px;  
12. }  
13. a {  
14.   color: #42b983;  
15. }  
16. </style>  

The <style scoped> attribute is used here to limit the above CSS to this component only. After using the <style scoped> attribute, your CSS would not be leaked to another part.

The <script> part: This part is exported with the name 'HelloWorld' and the data which will be displayed in the output is stored in "msg" variable.

1. <script>  
2. export default {  
3.   name: 'HelloWorld',  
4.   props: {  
5.     msg: String  
6.   }  
7. }  
8. </script>  

This is all about the file and folder structure of a Vue.js app. It is essential to know before start developing apps in Vue.js.

Source by : Javatpoint.com

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