VueJS series. Part 1


VueJS is like the offspring of AngularJS and ReactJS.

My first contact with VueJS was around two months ago and I’m sure saying I loved it from the start. VueJS has an amazing and clean way binding data, handling events and creating components.

There’s a trend on JavaScript frameworks on a “component oriented development”. Polimer, Angular 2.0, VueJS and many others are following this trend.

Great things are coming with VueJS, and it all starts with a:

new Vue({ el: ‘#app’ });


Just like any good start, the code below is a hello world in VueJS. Please, change the input and be amazed (You can check this JSBin for the same example).

<!DOCTYPE html>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width”>
<title>Hello VueJS World</title>
<!-- VueJS will use the #app div below to work its magic -->
<div id=”app”>
<div v-show=”!message” style=”color:red; font-weight:bold;”>
Please, write something.
<textarea name=”” id=”” cols=”30" rows=”10" v-model=”message”></textarea>
<button v-show=”message” @click.prevent=”handleIt”>vuejs click</button>
<h3>{{ message | json }}</h3>
<script src=”"></script>
<!-- VueJS script starts here -->
new Vue({
el: "#app",
data: {
message: "",
count: 0
methods: {
handleIt: function() {
updateCount: function() {
this.count += 1;