http://vuejs.org

Learning VueJs.03

Yesterday I’ve learned about some directives in VueJs and created a simple example to use some of them. Unlucky me I only had a few minutes in the train to read and learn about VueJs today and have just finished the small example to post it.

Counting trees&bees

While on the train I was thinking about some app I could write to show off what I’ve learned on that same train ride. I was counting trees the train was passing while thinking — it striked me, lets create a simple app which could help counting them!

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8"/>
<title>03 — vueJS — methods</title>
</head>
<body>
  <div id=”counter”>
<h1>{{ counter }}</h1>

<button v-on:click=”incCounter”>
Add to Counter
</button>

<button @click=”decCounter(2)”>
Substract from Counter
</button>
</div>
<script src=”https://unpkg.com/vue”></script>
<script>
new Vue ({
el: “#counter”,
data: {
counter: 0
},
methods: {
incCounter: function() {
this.counter++
},
decCounter: function(step){
this.counter -= step
}
}
});
</script>
</body>
</html>

Let’s start from the top to bottom and go through all the new stuff.

<button v-on:click=”incCounter”>
Add to Counter
</button>

The first new code you see here is v-on, it is a new directive to learn and basically it is an event listener. Here it is listening to a click event, if this button is clicked call incCounter which is a function within the VueJs instance. There are many more events to listen and use with v-on like keyup, mouseover, keypress etc.

<button @click=”decCounter(2)”>
Substract from Counter
</button>

This is the second button and it is acting almost like the first button, it listens to the click event but instead of using v-on: it is using the @ sign — a shorthand for v-on:.

The second difference is the function call, this button is calling the decCounter function and passes an argument which is totally fine with VueJs (yay!).

methods: {
...
}

The methods object within the Vue instance is the home of functions that can be called from within the html template VueJs controls.

incCounter: function() {
this.counter++
},

Functions in VueJs work like normal JS objects syntax wise — the key is the name of the function and its value have to be an anonymous function.

This function increments the counter data value by 1 each time the button “Add to Counter” is clicked. It seems VueJs is proxying data to the html template and to the VueJs — So it is possible to call all data and functions just by name from withtin the html template and calling everything from within the VueJs instance with this. It first seems a bit odd because it acts different from plain JS but you get used to it.

decCounter: function(step){
this.counter -= step
}

The last new code in this example shows another function which decreases the counter by the amount of the passed parameter. Now feel free to adjust the steps in which the counter should be decreased in the template.

Last words for today

I really like what I’ve learned so far and will use it to write a little, more or less, useful application where I use everything I’ve learned to this point, I will post it later.

‘till next time, bye.

<< GoTo Part .02

GoTo Part .04 >>