Remarks#

Vue.js is a rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.js, and Rivets.js that offers simplistic user-interface design, manipulation, and deep reactivity.

It is described as a MVVM patterned framework, Model-View View-Model, which is based on the concept of two-way binding data to components and views. It is incredibly fast, exceeding speeds of other top-tier JS frameworks, and very user friendly for easy integration and prototyping.

Versions#

“Hello, World!” Program

To start using Vue.js, make sure you have the script file included in your HTML. For example, add the following to your HTML.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

Simple Example

HTML template

<div id="app">
  {{ message }}
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

See a live demo of this example.

You might also want to check out the “Hello World” example made by Vue.js.

Hello World in Vue 2 (The JSX way)

JSX is not meant to be interpreted by the browser. It must be first transpiled into standard Javascript. To use JSX you need to install the plugin for babel babel-plugin-transform-vue-JSX

Run the Command below:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev

and add it to your .babelrc like this:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

Sample code with VUE JSX:

import Vue from 'vue'  
import App from './App.vue'

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})

By using JSX you can write concise HTML/XML-like structures in the same file as you write JavaScript code.

Congratulations, You’re Done :)

Handling User Input

VueJS can be used to easily handle user input as well, and the two way binding using v-model makes it really easy to change data easily.

HTML :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>

JS :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

It is very easy to do a two-way binding in VueJS using v-model directive.

Check out a live example here.