Vue.js 2 Complete Tutorial #5 Vue Template Syntax

Vue.js 2 Complete Tutorial
#5 Vue Template Syntax

Prepared By:
Renjith VK (https://github.com/renjithspace)
Rahul TP (https://github.com/rahulspace)

Vue.js uses HTML based template syntax. And so those templates are valid HTML. That can be parsed by browsers and HTML parsers.

Vue compiles the templates to Virtual DOM render functions and combine the reactive system. So it will able to render the minimal number of components and a minimum amount of DOM manipulation when the app states changes.

Text interpolation:
Text interpolation using mustache syntax is a basic data binding form. Let’s write a text interpolation.

We can create a data called message. Bind the message using mustache syntax. Run it on the browser. Yes, it rendered. Try to update the message. Yes, it updated.

What is happening here is the mustache tag replacing with the value of the data property, message. And it will be updated whenever change.

Raw HTML interpolation:
Mustache syntax interprets the data as plain text. So, if you use HTML, it will be output plain text instead rendered. To tackle it and bind Raw HTML we can use ‘v-html’ directive. Let’s try it.

We can create data called content with some HTML. Bind the data using mustache syntax. Run it on the browser. Here you can see it rendered as plain text. We can add ‘v-html’ directive to tackle that. Yes, it worked.

Please note, use of this directive on user-provided content may lead to Cross-Site Scripting vulnerabilities. So only use it for trusted contents.

Attributes interpolation:
We can’t use mustache syntax for attribute interpolation. We have to use the ‘v-bind’ directive to do that. Let’s try it.

We can add a data called message. Create a paragraph and bind the title using the ‘v-bind’ directive. The colon is the shorthand for ‘v-bind’, so we can use that. Run it on the browser. Yes, it working.

One-time interpolation:
Vue provides a directive called ‘v-once’ to perform the one-time interpolation. The data won’t be updated after the initial binding. Please note, this directive will also affect the child nodes. Let’s see in action.

We can create some data called name and email. Create a division and bind the name. Create a paragraph inside the division and bind the email. Add ‘v-once’ to division. Run it on the browser. Yes, it rendered. Try to update the app name and email. Yes, the changes not reflecting on both the parent and child node.

Using JavaScript expressions in interpolation:
Vue support JavaScript expressions in data bindings. There are some restrictions as well. Each binding can only contain one single expression. And expression only works, we can’t bind statements or flow control. We can’t use all globals in these expressions, only some whitelisted such as ‘Math’ and ‘Date’ are allowed. Let’s see it in action.

Let’s try to add a valid expression. Yes working. Try to add a statement. We got an error. Add a conditional statement. Yes, again error. Try another valid statement with whitelisted global, Math. Yes working. Try a non-whitelisted global, ‘globalThis’. Yes, we got an error as we expected.

Directives:
Directives are special Vue attributes with prefix ‘v-‘. The directives expect a single JavaScript expression. When the value of a directive’s expression changes, it will reactively apply side effects to DOM. Let’s see in action.

We can set a data called isOnline with the value true. Add a paragraph and bind v-if directive value as isOnline. Yes working on the browser. Let’s update the ‘isOnline’ value. Yes working.

Here in this example, what happening is, the paragraph removing and inserting based on the value changes of the expression ‘isOnline’.

Directives and arguments:
Some directives accept arguments. The ‘v-bind’ directive is one of them. Let’s check the usage.

Let’s create a data called ‘link’. Create an anchor and bind the link to the href attribute using ‘v-bind’ shorthand. Run it on the browser. Yes working.
Here the ‘href’ is the argument of ‘v-bind’ directive.

The ‘v-on’ directive also accepts arguments as event names. Let’s check it. Create a method called greet. Create a button and bind the greet method to click-event using ‘v-on’ shorthand. Run it on the browser. Yes working. Here ‘click’ is the argument of ‘v-on’ directive.

Directives and dynamic arguments:
Directive’s arguments accept JavaScript expression. So we can create directives with dynamic arguments in Vue by wrapping it with square brackets. The argument’s expressions must be output to a string, otherwise, it will trigger warning. And we can use the ‘null’ value to remove the binding. These expressions are not accepted some certain characters such as spaces and quotes. Because it will be invalid in HTML attributes. But we can tackle that with computed properties. The expression names must be in lowercase. Because the HTML attribute names coerce into lowercase in browsers.

Post Author: hatefull