VueJS series. Part 1

tl;dr

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’ });

Demonstration

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>
<html>
<head>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width”>
<title>Hello VueJS World</title>
</head>
<body>
<!-- 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.
</div>
<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>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<!-- VueJS script starts here -->
<script>
new Vue({
el: "#app",
data: {
message: "",
count: 0
},
methods: {
handleIt: function() {
alert('Handled.');
},
updateCount: function() {
this.count += 1;
}
}
});
</script>
</body>
</html>