Here's an example of basic Vue.js  scenario. A button that increments and decrements a number.

Breaking down

Let's breakdown what's happening on our code.


Our Vue.js code has 3 major parts:

el: "#app"

The element of that represents the view of this app.

data: {
  count: 0

The object that contains all of the variables within this app. In this case, it only have one property. The count variable.

methods: {
  increment () {
    this.count += 1;
  decrement () {
    this.count -= 1;

The methods the will increment and decrement the count property in the data object. We have 2 methods, the increment and the decrement methods.


On our HTML file we just have the following:

<div id="app">

The container of the Vue.js app. The id="app" in this snippet should match the one in the el: '#app' property.

Note: The main execution context of this Vue.js app are only within this block of html code. Anything that's outside of this will be unreachable to Vue.js

Inside this block are the following:

<h1>Count - {{count}}</h1>

An h1 tag with {{count}}. This is where the interpolation of data happens. It means that whatever the value of the property count will be displayed here. The {{}} is a special syntax for interpolation.

<button @click="increment">Increment</button>
<button @click="decrement">Increment</button>

Now we have to buttons that will perform the processes of adding and subtracting 1 to the value of count property. Each button has a click event @click="[method name]". Thi means that the  increment and  decrement methods will be invoked upon perfroming the "click event".

The Logic

This app has very simple logic, it is just performing the addition and subtraction operations.

Now in the increment method:

increment () {
  this.count += 1;

Upon the invocation of this method, a single statement is being ran.

this.count += 1;

This just means that we are adding 1 to the count variable and assigning the result to itself.

count = count + 1;

The same logic applies to the  decrement method, the only difference is that we are subtracting 1 to the  count property.

The this followed by a . (dot-notation) means that we a accessing the  variable count within the local execution context of this app.

So basically (almost) everything inside the: new Vue ({...}) is accessible thru the this context.