Zero to Hero with Vue - Introduction (Part 1)

         ·

For some time now, Vue - seemingly a React & Angular hybrid - has seen it’s adoption rate & community continually skyrocketing. It’s about time we jumped on the bangwagon (because it’s not slowing down) and embraced it whole heartedly. Though, I’ll still always love React.

Through the course of this mini-series we’ll start with Vue basics, then move onto building a Todo-List application (Do you even know a framework if you haven’t built one of these with it?) using ES6, TDD with Karma/Mocha (unit tests) & Nightwatch (E2E). We’ll also integrate VueX, Vue’s equivallent of Redux, to manage the application state.

This tutorial assumes good working knowledge of Node/NPM & navigating around your computer using Terminal or Windows equiavlent. If you’re familiar with git and want to skip the boring introduction, you can find and clone the starter code in my GitHub repo williamhgough/zero-vue.

Set Up

Let’s get started by booting up our favourite code editor, I’ll be using Sublime Text 3. Create yourself a workspace like so:

cd ~/your-workspace
mkdir zero-vue-1 && cd "$_"
touch index.html

Proceed to open the new directory in your editor. And add the following HTML to your index.html file:

<!DOCTYPE html>
<html>
	<head>
		<title>Zero To Hero w/ Vue</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css" />
		<script src="https://unpkg.com/vue@2.2.6"></script>
	</head>
	<body>
		<div id="app" class="container">
			<h1>Vue Hero Part 1</h1>
		</div>
	</body>
</html>

Here we’re using Bulma CSS framework & the latest stable development version of Vue (2.2.6), hosted by Unpkg at: unpkg.com/vue@2.2.6

Instantiating Vue

Now that the boring bit is over and done with, we can get our hands dirty with some sweet, sweet code. To begin with, we’ll need to initialise a new Vue application. In your HTML, before the closing body tag, add the following JavaScript:

<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			text: 'Hello World'
		}
	})
</script>

To clarify, we’ve instantiated a new Vue Application on the element with id ‘app’, and passed it an initial data object. Our initial data object has a text property with the value of ‘Hello World’. Without further ado, lets get that text rendering in the DOM. In your HTML, edit your H1 tag to look like this:

<h1>{{ text }} - Vue Hero Part 1</h1>

Congratz! If all was successful, you should now see ‘Hello World - Vue Hero Part 1’ as the header tag on your page. Those curly braces may feel pretty familiar to a lot of you, they’re conventionally used across most templating engines, regardless of language, to tell the framework/library where data will need interpolating.

Data Binding

Moving forward from rendering application data to the DOM, let’s take a look at data-binding in Vue. This is where the similarities of Vue & Angular start to show for me, I’m not a big fan of library specific markup in HTML files. Personally, avoiding this was one of the biggest wins React provided.

By adding the following code underneath our header tag, we can start to play around with the value of the ‘text’ data:

<input type="text" v-model="text" />

Refresh the browser and start tinkering with the input value, what you should see is the text inside our header change as the input changes. This is because we’ve told Vue to use the value as the model for our text property, our data has now bound together.

Handling Lists

Most often in modern JavaScript Apps, we’ll have to render items based on data provided by our Back-end or via an external API. To do this, we need a way of looping through our data and outputting the desired structure.

Vue provides this functionality to us through an intuitive tag - ‘v-for’, which we can attach to any HTML element and all child elements will be output for each item in the data. To better illustrate this, let’s create a list. Add the following object to your applications data structure, under the text property we added earlier:

	todos: [
		{ id: 1, text: 'Pick Up Food'},
		{ id: 2, text: 'Watch Film'},
		{ id: 3, text: 'Learn Vue'},
	]

Now in our HTML, we need to create the unordered list and tell Vue to create a list item for each one.

<ul>
	<li v-for="todo of todos">{{ todo.task}}</li>
</ul>

Boom, we now have 3 list items rendered in our DOM.

That concludes Part 1 of the ‘Zero to Hero with Vue’ series, in Part 2 we’ll look at taking our application to the next level by improving on our list of todo items and using TDD to influence our code. The completed code for this section is available at my GitHub repo williamhgough/zero-vue/part-1. Thanks for reading!