Build an Online Shop with Vue

Template Syntax

Template Syntax

With Vue being an MVVM tool, there needs be a way to bind the models to their respective views. This way, data being handled by an underlying model is printed in the browser for the user's consumption.

Views are represented by HTML templates but with extra utility features like interpolation ({{ }}) and directives (v-on:click) to help display the models' data.

A Comparison

A quick look at the conventional JavaScript DOM manipulation (without Vue) techniques will make us appreciate what Vue's templates have to offer. A simple and perfect example is trying to insert text into a given div:

// jQuery
const divElement = $('#text');
divElement.text('Hello Vue')

It's even more tedious with JavaScript:

// JavaScript
const divElement = document.getElementById('text');
const textNode = document.createTextNode('Hello Vue');


With Vue, it's dead simple and declarative:

new Vue({
    template: `<div>{{text}}</div>`,
    data () {
        return {
            text: 'Hello Vue'

The template (view) and data (model) are split into different entities but bound together using the object properties. Let's explain some binding concept:


The concept of using double curly braces as a placeholder for data properties in a Vue template is known as an interpolation:


The double curly braces are popularly known as Mustache syntax/tag. Vue is not the only tool that uses it so don't get thrown off when you see it somewhere else.

The mustache tag will be replaced with what ever the data holds during render. The amazing thing is that when the bound data changes, the template automatically gets updated. This is one painful limitation our JavaScript example has. We would have to check for changes and do the update manually.


Directives are custom HTML attributes that allow you to bind data to both view and attributes. It also helps with binding DOM events.

<div v-text="text"></div>

<!-- same as -->

Directive Attributes

You might be tempted to use interpolation (mustache) in HTML attributes:

<!-- WRONG!!! -->
<div id="{{id}}">{{text}}</div>

Vue will scream errors once it encounters that.

The v-bind directive is responsible for such tasks. So you could safely do this:

<!-- VERY CORRECT!!! -->
<div v-bind:id="id">{{text}}</div>

If that seems like a lot of key strokes, shorthand is allowed:

<!-- Vue is awesome !!! -->
<div :id="id">{{text}}</div>

<!-- Another example with href -->
<a :href="url">{{text}}</a>

Same pattern works for event binding as well. Rather, than v-bind, we will use v-on which is Vue's event binding directive:

<button v-on:click="addToCart">Add to Cart</button>

<!-- Shorthand -->
<button @click="addToCart">Add to Cart</button>


Vue allows you to modify the (default) behavior of some attributes right inside the template. A good guess is that you have seen something like this:

function handleFormSubmit(event) {
    // Send to server

The snippet will make your browser not reload in an attempt to submit a form. You don't have to take this dirty job to the logic again; you can easily use a modifier to handle such case in your template:

<form v-on:submit.prevent="handleFormSubmit">

<!-- Shorthand -->
<form @submit.prevent="handleFormSubmit">

Template Expressions

Vue allows you to perform minor JavaScript-like template expressions in the HTML:

<div>{{2 + 5}}</div> <!-- 7 -->

<div>{{2 + '5'}}</div> <!-- 25 -->

Like this article? Follow @codebeast on Twitter