Vue.Js Introduction

From WikiOD

Remarks[edit | edit source]

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[edit | edit source]

Version Release Date
2.4.1 2017-07-13
2.3.4 2017-06-08
2.3.3 2017-05-09
2.2.6 2017-03-26
2.0.0 2016-10-02
1.0.26 2016-06-28
1.0.0 2015-10-26
0.12.0 2015-06-12
0.11.0 2014-11-06

"Hello, World!" Program[edit | edit source]

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[edit | edit source]

HTML template[edit | edit source]

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

JavaScript[edit | edit source]

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)[edit | edit source]

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[edit | edit source]

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.

This article is an extract of the original Stack Overflow Documentation created by contributors and released under CC BY-SA 3.0. This website is not affiliated with Stack Overflow