Introduction To VUE.js

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.

<script src="https://unpkg.com/vue"></script>

NPM

Install vue.js with the following command -

 

npm install vue

 

VUE CLI

Vue also provides its CLI for creating the applications. Install Vue CLI by running the following command.

 

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.

 

vue init webpack my-project

cd my-project

npm install

 

Now, run the project by running following command.

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 same as the Angular projects. Open the index.js file in src folder. This is the file that has the information of 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.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

Now, let’s create our variable for mapping the data. Add the following code in script tag.

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'First Vue app'
    }
  }
}
</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.

<template>

</template>
<script>
export default {

    data () {
      return {
        msgModal: "hi VUE ",
      }
    }
  }
  </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.

<template>
  <div id="app">
    {{msg}} {{msgModal}}
  </div>
</template>

<script>
 import Modal from './Modal.vue'
  export default {
    components: { Modal },
    data () {
      return {
        msg: "hi",
        msgModal:Modal.data().msgModal
      }
    }
  }
</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.

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