Fundamentals of Vue.js p.3 — Template Syntax and Directives

Carrying on with our series of looking into Vue.js as a leading framework in simplicity and reactivity. This entry we will look at template syntax that allows developers to declaratively bind the rendered DOM to the underlying Vue instance’s data, and some more directives so that we can apply side-effects to the DOM when the value of the expression changes.

Template Syntax

Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Starting off with the most basic form of data binding, text interpolation using double curly braces.

<span>Message: {{ msg }}</span>

The value of msg within the curly braces will display the text as well as an update when msg changes.

A way to avoid update changes to the DOM when the data changes, we can use the v-once directive:

<span v-once>This will never change: {{ msg }}</span>

Vue also allows us to write in Raw HTML using the v-html directive:

<p>Using double curly braces: {{ rawHtml }}</p>
 
<p>Using v-html directive: <span v-html=”rawHtml”></span></p>

Double curly braces cannot be used inside of HTML attributes. Instead, we can use the v-bind directive:

<div v-bind:id=”dynamicId”></div>

If the attribute is a boolean attribute, v-bind works a little differently. Look at this example:

<button v-bind:disabled=”isButtonDisabled”>Button</button>

In this example, if ‘isButtonDisabled’ is false, null, undefined, the disabled attribute will not be included in the rendered button element.

Do you love JavaScript? If yes, you’ll enjoy hearing that Vue.js actually supports the full power of JavaScript expressions inside all data bindings.

{{ number + 10 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ reverseMsg.split(‘’).reverse().join(‘’) }}
<div v-bind:id=”’list-’ + id”></div>

There is one restriction; each binding can only contain one single expression, so the following example wouldn’t work.

<! — this is a statement, not an expression: →
{{ var a = 1 }}
<! — flow control won’t work either, use ternary expressions →
{{ if (ok) { return message } }}

Directives

We’ve seen above and in previous examples the use of directives using ‘v-’. Directive attribute values are expected to be a single JavaScript expression (with the exception of ‘v-for’).

Some directives can take arguments! These are denoted by a colon after the directive name:

<a v-bind:href=”url”> … </a>

The argument here is ‘href’ which tells v-bind to bind the element’s ‘href’ attribute to the value of the expression ‘url’.

Event listeners can be used using the ‘v-on’ directive:

<a v-on:click=”doSomething”> … </a>

We’ve seen this before in a number of other frameworks, where the argument is the event that ‘v-on’ is listening for. We will look to go more in-depth into event listeners in later issues.

Arguments can be dynamic.

<a v-bind:[attributeName]=”url”> … </a>

Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets. ‘attributeName’ will be dynamically evaluated.

Some constraints to dynamic argument values are that they’re always expected to evaluate to a string, with the exception of null. All other datatypes will trigger a warning.

Lastly, modifiers are special postfixes that a directive should be bound in a certain way. For example, the ‘.prevent’ modifier tells the ‘v-on’ directive to call 'event.preventDefault()' on the triggered event:

<form v-on:submit.prevent=”onSubmit”> … </form>

This concludes my third entry into the fundaments of Vue.js. Hope you’ve been enjoying :)