“Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces…The core library is focused on the view layer only, and is very easy to pick up.”
If you already know HTML, CSS, and JavaScript, then picking up Vue is a breeze! In the following article, I’ll show you how to get up and running with Vue and how to use it to create a simple UI version of a Hello World! program. I’ll make sure to highlight some core features as we go. Let’s first have a look at the finished product; afterward we’ll deconstruct:
See the Pen JbXWQV by Chase Allen (@ccallen001) on CodePen.
To get started building the above app, we’ll first and foremost want to first include Vue in the project. Including Vue is as simple as sourcing its hosted script; you can literally just add <script src="https://unpkg.com/vue/dist/vue.js"></script> to your HTML. It’s that easy, you’re up and running with Vue!
Next step is setting up the HTML container for the app. I chose to use a <div> element with id="vue". This container will house all of the HTML elements for the app. It looks like this:
See the Pen JbXWQV by Chase Allen (@ccallen001) on CodePen.
In the HTML there, the first thing you probably noticed was the {{text}} bit. It’s Vue’s way of doing text interpolation using templates. If you’re familiar with Mustache syntax, then this should already be familiar to you. You’ll want to get an instance of the Vue object going in your script. To get an instance of Vue running in your script, simply invoke one by using the new keyword. You’ll then want to select the HTML element that contains the app. The setup looks like this:
Next, to get the template going, you’ll add in a data property with it’s value set to an object containing template names and values. That code looks like this:
And that’s really all there is to it! You can now paste {{text}} anywhere within the HTML containing your app and it will render as some text (or whatever other value you assign to it).
Now… let’s say you want to insert something more than just text; let’s say you want to insert HTML in to your app. To achieve that, you’ll add a new property to the data object within the Vue instance. It’s the exact same way you did it for the text example above. Like this:
The difference is in the HTML. In the HTML you’ll add a v-html attribute and you’ll set it equal to the key name within the data object. The whole bit looks like this: <div v-html="html"></div>
Next, you probably noticed some odd looking elements in the HTML for the app… the <bar> and <hello> tags… Those tags are custom elements that I created using Vue’s components feature. To create a component, you write JavaScript that accesses Vue’s component method. You pass the name of the component (what you’ll use as the tag name for custom HTML) and an object containing a template property to Vue.component. The value of the template property will be the HTML you want to set up as your custom element. The entire bit of JS code for the custom <hello> element looks like this:
NOTE: You have to set up components before setting up the Vue instance that uses them.
Finally, we have Vue’s way of doing event handling. To set up functions that are called upon events, you’ll want to add a methods object to the Vue instance. That object will contain key: value pairs of names and functions. The code will look something like this:
Then, over in the HTML, you’ll add the v-on attribute to the tag of the element to which you want to listen. You’ll specify the type of event for which you want to listen by adding a colon (:) and then adding the event name. Finally, you add the methods key (i.e., name of the function) you want to call upon occurrence of the event. All of that ends up looking like this in the HTML v-on:click="myFunction".
Great! Got all that? Here’s the full JavaScript code for the app first featured:
See the Pen JbXWQV by Chase Allen (@ccallen001) on CodePen.
Feel free to change things in the HTML, and in the Vue components and instances in order to get a feel for how things are wired up and how they behave.
That’s really all you need to get a simple UI app up and running with Vue. Of course, there’s much more to Vue than the few items I discussed here (you can read the full documentation here: https://vuejs.org/). This tutorial was simply meant to give you taste of Vue and a few of it’s more core features. Hopefully you found the information to be of practical use; something that you can start applying to your own projects right away. Stay tuned for more on Vue! Thanks for reading!