Post
Ask Question

Introduction To VUE.js

Introduction

 
Vue is a framework that is designed for the implementation of user interfaces. Vue has taken all the good things from different front-end frameworks like Angular, React, and Polymer.
 

Vue takes

  • Virtual DOM with reactive components and React Store from Redux.
  • Data binding, conditionally rendering data, services, components, and directives from Angular.
  • It has also taken some styles from Polymer.
You can read the comparison of Vue with other frameworks at the official website.
 
Installation
 
We can have different approaches for the installation of Vue.js Framework.
 

CDN

 
You can have vue.js in your application by adding the following CDN path to your script tag. 
  1. <script src="https://unpkg.com/vue"></script>   

NPM

 
Install vue.js with the following command -
  1. npm install vue  

VUE CLI

 
Vue also provides its CLI for creating the applications. Install Vue CLI by running the following command.
  1. npm install --global vue-cli  
Sample App with Vue
 
Let’s create our first app using Vue CLI. Create a new Project by running the following commands.
  1. vue init webpack my-project  
  2. cd my-project  
  3. npm install  
Now, run the project by running the following command.
  1. npm run  
You will see a welcome page. Now, open your project in VS Code. For enabling the tooling in VS code, install the "vetur" extension in it. You can see that the structure of the project is the same as the Angular projects. Open the index.js file in the src folder. This is the file that has the information on our routes.
 
In Vue, a component is made up of three things
  • Template
  • Vue.js
  • CSS
All Vue.js is embedded in the script tag and we can import other components as well. Navigate to the src folder. Here, you will see a folder named component. All of the Vue components will be available in this folder. Let's start with data binding.
 
Open the components present in vue file and delete all the code in it.
 
Let's add a template to the Vue file.
  1. <template>    
  2.   <div class="hello">    
  3.     <h1>{{ msg }}</h1>    
  4.        
  5.   </div>    
  6. </template>   
Now, let’s create our variable for mapping the data. Add the following code in script tag.
  1. <script>    
  2. export default {    
  3.   name: 'HelloWorld',    
  4.   data () {    
  5.     return {    
  6.       msg: 'First Vue app'    
  7.     }    
  8.   }    
  9. }    
  10. </script>   
Here, we are using the data biding concept of Angular so any change in msg property will affect the View.
 
Let's create another component. Create a new file with Vue extension. Add the following code.
  1. <template>    
  2.       
  3. </template>    
  4. <script>    
  5. export default {    
  6.     
  7.     data () {    
  8.       return {    
  9.         msgModal: "hi VUE ",    
  10.       }    
  11.     }    
  12.   }    
  13.   </script>   
We want to use this component in our first component. For that, we use import same as in Angular. After importing, our first component will be like this.
  1. <template>    
  2.   <div id="app">    
  3.     {{msg}} {{msgModal}}    
  4.   </div>    
  5. </template>    
  6.     
  7. <script>    
  8.  import Modal from './Modal.vue'    
  9.   export default {    
  10.     components: { Modal },    
  11.     data () {    
  12.       return {    
  13.         msg: "hi",    
  14.         msgModal:Modal.data().msgModal    
  15.       }    
  16.     }    
  17.   }    
  18. </script>   
Here, we have imported the second component in the first component and we are using the property of the second component in the first component.
 

Summary

 
This is a simple example of components and data binding in Vue. Source code is attached.


Similar Articles