Vue.js is a JavaScript library for building user interfaces. Last year it started to become quite popular among web developers. It’s light weight, relatively easy to learn, and powerful.
In the three minutes Medium says it will take you to read this article, you’ll get equipped with some 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.
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:
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
.
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:
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
.
Here is a 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.
**Recommended Courses: **
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
☞ https://school.learnstartup.net/p/BJBa7-l-g?utm_source=1
Learn the core concepts of Vue.js while creating an app
☞ https://academy.learnstartup.net/p/BJCrwLMFb/fundamentals-of-vue-js/?utm_source=1
Vue JS 2.0 - Mastering Web Apps
☞ https://goo.gl/vy4ikC
Vue JS: From Beginner to Professional
☞ https://goo.gl/ekmvJN
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Machine Learning Zero to Hero - Learn Machine Learning from scratch
☞ Top 4 Programming Languages to Learn In 2019