Vue.js

A Quick Introduction to Vue.js

Updated: February 26, 2016 (Vue.js version 1.0.16)

Vue.js is a powerful, yet easy to use, JavaScript library for building interactive web interfaces. Relatively new, Vue.js is starting to get noticed and is quickly picking up steam. I’ve been experimenting with it for a couple months and I absolutely love it. This quick introduction is to help those who are curious and want to get started with Vue.js. We won’t dive deep, so don’t be intimidated. Just follow along and you’ll be well on your way to learning Vue.js.

The First Steps

First things first, let’s setup a bare bones HTML document and include Vue.js from a CDN. If this were a production environment I would save a local copy, but for our purposes this will be fine. We will also need to create an  app.js  file and include it right before we close the <body> .

On a side note, you could also install Vue.js using NPM or something like Bower. Visit the Installation page for more information on those approaches.

Views, Models, and Two Way Data Binding

Like I said above, we’re not diving very deep in this tutorial, but you will need to have a very basic understanding of the ViewModel layer. From the Vue.js guide:

Technically, Vue.js is focused on the ViewModel layer of the MVVM pattern. It connects the View and the Model via two way data bindings.

Those of you not familiar with patterns like MVVM or MVC (or the bajillion others) are probably scratching your heads. Don’t fret. At the most basic level this means: “When the data gets updated, the interface gets updated. When the interface gets updated, the data gets updated.” This concept is what we’re focusing on in this tutorial, so if you’re not getting it at the moment just keep going. It will hopefully become more clear.

Let’s Build Something

To give you an understanding of two way data binding and what Vue.js can do, let’s create a very simple app that displays a message in the browser. Going back to our HTML file, let’s make a few additions:

We’ve added a div and given it an id of “container.” Within our container div, is an h1  with some text. You’ll notice the {{ name }}  portion, we’ll come right back to that but I’m sure you can guess what happens.

Open up app.js  and add the following:

This creates a new Vue instance and binds it to our container div ( el: ‘#container’ ). That means Vue can access whatever is within our container div. Not too hard, right? Let’s keep going.

How about we introducing some data:

We’ve added a data  object to our Vue instance and assigned name  a value of ‘Matt’. When you open the HTML document, you should see:

Hello, people call me Matt…

Pretty nifty, huh? {{ name }}  now displays “Matt.” Those are called Mustache Bindings. If you’re coming from the PHP world, it’s kind of like doing:

Kinda.

Now the fun stuff…

We’ve created an HTML page, we’ve got a Vue instance running, let’s make things a little more interesting. Add the following to your HTML file right under the  <h1> :

Before going further, take a second to open the HTML file in your browser and type something into the input we just added. I’ll wait…

I know, right?!?

That my friends is two way data binding in action. When we update the input field the name  property is automatically (automagically, perhaps?) updated. The input is bound to our data by using the vmodel  attribute, which is a Vue.js Directive.

In Conclusion

This is a very, very basic introduction to Vue.js. My goal was to give you a quick introduction and send you on your way to learn more.

Additional Reading

Leave a Reply

Your email address will not be published. Required fields are marked *