Vue.js 2 – Part 1: Getting Started | Basic Data Binding

January 24, 2017

Welcome to the Vue.js journey. Recently started digging Vue, trust me it is really an amazing framework to put inside your dev bucket. Vuejs is very easy to learn, specially for front-end developers interested in learning a front-end JS framework which is easy and quickly adaptable. Recently I have started working with Vue and was very excited to share my journey with the developers like me. Here I will start with setting up a simple Vue.js project followed by basic data bindings in Vuejs. You will need basic HTML, CSS and Javascript knowledge to follow this journey.

Install Vue.js

First you need to install Vue.js in you machine. You can do it using npm, but for learning purpose I will like to keep things bit simple and I will pull it from CDN. But yes of course when you are doing a real project it will be better choice to add Vue.js library using npm.

Go to Vue.js installation page, scroll down a bit and from CDN section click on unpack and get the link.

Link: https://unpkg.com/[email protected]/dist/vue.js

Now that we copied the link we need a blank HTML file to start with. Open your preferred code editor and create a skeleton HTML file and add the link using script tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Let's Vue</title>
</head>
<body>    

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</body>
</html>

Data Binding

We are all set up to start with Vue now. Let’s get started with very basic. We will see basic data binding. The idea is to dynamically bind a value with a input field.

First let’s create our input field set the type as text and give it an id, I am using welcome. Wrap the input field with a div element with id root.

<div id="root">

        <input type="text" id="welcome">

 </div>

Vue Instance

Now let’s create a new Vue instance and pass some information.

<script>
        var app = new Vue({
            el: "#root",
            data: {
                message: "Let's Vue!"
            }
        });
</script>

Let’s see what is going on here. We have create a new Vue instance, and using el: “#root” we are specifying the surface area that vue will work. So Vue will not communicate with anything outside of the root element. Then we specified a data property called message with some value. I hope you are familiar with the key value pair notation.

Open the HTML in your web browser, yes nothing is happening only a blank input field, because we haven’t yet specified any way for Vue to communicate with our input field, let’s do that. We will need a Vue model directive v-model to serve our purpose. To give you a heads-up you will see all Vue directives start with a v- which makes it much clear that we are working with Vuejs.

v-model directives are specifically for form controls. I will bind this to the our message property here.

<input type="text" id="welcome" v-model="message">

Refresh the browser and take a look. The input field will be instantly update with the message text “Let’s Vue!”

Congrats we have successfully done two-way data binding. Now let’s do something else to get the flavour of two-way data binding. I will add a paragraph tag inside the #root element and dynamically change some value whenever the input field value gets change. Add the below line inside the root

<p>Value changing dynamically {{message}}</p>

Using this mustache like syntax {{message}} we are telling the data model that spread out the message attribute here and whatever the value is print it out in real time. So whenever the message data is changing it is getting updated instantly.

So yes that was the simplest way I found to learn data binding in Vue.js, hopefully you got a clear understanding about basic data binding and yes of course it was two-way. We we see some more details later on but that’s it for now.

In the next section I am planning to take a look at how can we debug Vue, we will setup Vue Devtools and see how we can use it.