Vue.js: a 3-minute interactive introduction

Vue.js: a 3-minute interactive introduction

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.

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.
hello

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 thiskeyword 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

Suggest:

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

Javascript Project Tutorial: Budget App

What Can We Learn With JavaScript Fatigue