Template Syntax

According to Vue.js documents, Vue implements the template engine by binding to rendered DOM with the underlying Vue instance’s data. All the templates are in HTML so can be parsed by most spec-compliant browsers.

There are several aspects of template handling, not only about the text in Vue. In fact, Vue watches the state change of the instance, and reflect all changes to its compiled virtual DOM render functions.

the figure above only describes the state change and event fired by the change. It is not an anatomy of actual Vue.js instance

Interpolations

Vue.js can turn the referenced underlying instance data to DOM content through the whole interpolation process.

Text Templating

For plain text based content, such as strings could be interpolated into DOM through variable references with mustache syntax.

Pay attention to the figure I put at the beginning. You may notice that once instance data changes, the virtual DOM render functions will start to interpolate new data value to the bound DOM component/element.

If you don’t want the instant update feature, use v-once command (or directive in the official document) to make the interpolation only happen during the very first render process.

Raw HTML

All variable referenced in the mustache syntax will be treated as plain text, even if they are actually HTML strings. In order to cover the shortage, Vue support binding with v-html directive (only for HTML content). Vue will try to render related data into DOM string (it may auto complete the missing close tag to the end of an element scope), but if failed, it will be treated as plain text, which has the same result as mustache syntax. I strongly don’t suggest developers to use v-html to render plain text, because Vue may fail to render content with ‘<’ tags.

For security reasons (XSS), you are not supposed to use v-html when operates on user inputed content. Sometimes, you can use regular expression to filter the content and stop interpolation when there are insecure scripts.

HTML Attributes

If you’d like to bind variable data to HTML element attributes, use v-bind directive.

You may need to notice that v-bind can be used to remove a specified attribute. If the variable referenced by v-bind is set to undefined, null or false, the bound attribute will be removed from DOM element.

JavaScript Expressions

JavaScript expressions are allowed in interpolations. There are several circumstances:

1. Mathematical expressions. eg: 4 + 1.
2. Ternary expressions with number/string/boolean values. eg: true ? ‘ok’ : ‘nope’.
3. Functions with string return values. eg: [1, 2, 3].join(‘-’).
4. String operator expressions. eg: 521 + ‘ycr’.

You should pay attention that comma-separated expressions are NOT allowed even they are evaluated as valid JavaScript expressions with number/string/boolean values. You may have a try in Vue and you developer console in browsers:

Vue will treat the expression as a plain string. But your console will output ‘11’, which is a normal string.

Directives

Directives in Vue are HTML attributes with a ‘v-’ prefix. Directives are pretty useful. You may bind them with JavaScript expressions which we talked above. JavaScript expressions must have values of string/number/boolean.

Arguments

You may notice that the v-bind directive has a colon after ‘bind’. The word after the colon is actually the argument of v-bind. Only some directives can have arguments. The most common ones are v-bind and v-on.

• v-bind. This is a directive designed to update HTML attributes. So you should specify what attribute to update while using v-bind.
• v-on. The directive is used to register event handlers, such as click.

Modifiers

Modifiers tell Vue to bind the directive in some special ways. For example, we may want to prevent firing browsers default actions when the click event triggered. So we may use v-on:click.prevent to make it work.

Shorthand

It could be really frequently used that we may want to update element attributes and register event handlers. Just type v-bind or v-on is far more slow and we need a faster way. So here comes ‘:’ and ‘@’. Just omit v-bind before ‘:’ and replace v-on: with ‘@’ can mostly simplify these directives.

If you like my content, please clap and follow me. Checkout my original content at devchache.com.