Vue.js is a JavaScript library for building user interfaces. Last year, it started to become quite popular among web developers. It’s lightweight, relatively easy to learn, and powerful.
In the three minutes that Medium says it will take you to read this article, you’ll be equipped to start building basic Vue apps. With each segment, I’ve also included an interactive Scrimba screencast, where you can watch me explain the concepts and play around with the code yourself.
Let’s jump into it.
Template syntax and data
At the core of Vue.js is a straightforward template syntax which looks like this:
<div id="myApp">
{{ message }}
</div>
Pair that with the following JavaScript snippet:
var myApp = new Vue({
el: '#myApp',
data: {
message: 'Hello world!'
}
})
And it’ll result in Hello world! being rendered on the page.
The el: #myApp
part tells Vue to render the app inside the DOM element with the id of myApp. The data
object is where you place you the data you want to use in your app. We’ve added only one key here, message
, which we’re referencing to in our HTML like this: {{ message }}
.
Vue takes care of linking the data
object to the DOM, so if the data changes, the page will be updated as well.
This is called declarative rendering. You simply specify what you want to update, and Vue takes care of how to do it.
You can change the data can by doing this:
myApp.message = 'Some new value';
Here is a screencast which explains this exact concept:
Directives
The next concept you’ll need to learn is directives. Directives are HTML attributes that are prefixed with v-
, which indicates that they apply reactive behavior to the rendered DOM.
Let’s say we only want to render something if a condition is true, and hide it if it’s false. Then we’ll use v-if
.
In the HTML, it looks like this.
<div id="app">
<p v-if="seen">Now you see me</p>
</div>
And some JavaScript:
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
This will result in rendering out the Now you see me paragraph if seen
in data
is true. To hide the paragraph, you can set seen
to false, like this:
app.seen = false;
Here is a screencast explaining the same concept:
There are many other directives, like v-for
, v-on,
v-bind
and v-model
.
Handling user input
Another core directive you need to learn is v-on
. It will hook up an event listener to the DOM element, so that you can handle user input. You specify the type of event after the colon. So v-on:click
will listen for clicks.
<div id="app">
<button v-on:click="myClickHandler">Click me!</button>
</div>
myClickHandler
refers to the key with the same name in the methods
object. Needless to say, that’s the object where you place your app’s methods. You can have as many methods as you want.
var app = new Vue({
el: '#app',
methods: {
myClickHandler: function () {
console.log('button clicked!');
}
}
})
This will result in button clicked being logged to the console when clicking the button.
Here is a screencast explaining the concept:
Tying it all together
Now let’s create an example where we’re using both data
and methods
, tying together what we’ve learned up until now.
<div id="app">
<p>{{ message }}</p>
<button v-on:click="changeMessage">Click me!</button>
</div>
And the JavaScript:
var app = new Vue({
el: '#app',
data: {
message: 'Start message'
},
methods: {
changeMessage: function () {
this.message = 'The message has changed!'
}
}
})
Initially, it’ll display out Start message on the page, however after the click it’ll display This message has changed instead.
The this
keyword refers to the Vue instance, the one we’ve called app
. It is on this instance that our data lives, so we can refer to the message
data through this.message
.
Check out this screencast explaining the concept.
And by that, you should know enough Vue.js to get started creating simple apps.
In the next tutorial, you’ll learn how to create Vue components. So be sure to follow this publication if you liked this article.