Vue.js 2 Complete Tutorial
#5 Vue Template Syntax
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 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.
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.
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.
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.
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: