Template Syntax

Question 1

Justify Vue.js’s template syntax

Answer 1

It allows you to use an HTML-based template syntax to declaritively bind the rendered DOM to the underlying Vue instance data.

Question 2

Briefly describe template rendering under the hood.

Answer 2

• Vue compiles the templates into Virtual DOM render functions
• With the reactivity system, Vue intelligently figures out the minimal number of components to rerender
• Applies the minimal amount of DOM manipulations when the app state changes

Question 3

Besides templates, what other options do you have?

Answer 3

You can directly write render functions with pure JavaScript, and optionally use JSX

Question 4

How 2 methods can you use to be assured initial data will not be changed if you want the component template to be completely static?

Answer 4

1. Use Object.freeze(<data-object>) so that not updating or tracking is done to the managed data object</data-object>
2. Use v-once to ensure only one interpolation happens and no more changes will be made via data-binding

Question 5

What is the most basic form of data binding?

Answer 5

Text interpolation using “mustache” syntax

Message: {{ message }}

Question 6

How do you perform one-time interpolations?

Answer 6

Use the v-once directive on an element (node).

` {{ name }} is now {{ status }}`

Of course, v-once will affect all bindings on the node it’s placed on.

Question 7

Describe rendering dynamic HTML.

Answer 7

• You must use the v-html directive on an element
• `

The code should be: * You can’t use v-html to create template partials

* Vue is not a string-based templating engine * Dynamically rendering arbitrary HTML can lead to XSS vulnerabilities
* Only use HTML interpolations on trusted content, and **never** on user-generated content

Question 8

How do we deal with binding data to attributes?

Answer 8

• Attributes can’t accept mustache syntax
• We use the v-bind directive to bind data to an attribute
  
  • {{message}}
• For boolean attributes, the following binded values will cause the attribute to not be rendered
  
  • **​**null, undefined, or false

Question 9

Can only simple properties be included in interpolations?

Answer 9

• No, we can use full JavaScript expressions
• We can only use one single expression
• They’re evaluated in the data scope of the owner Vue instance
• These expressions are sandboxed, only have access to certain globals, especially libraries, such as Math, and Date

Question 10

What are directives?

Answer 10

• They are simply special attributes with the v- prefix
• It’s job is to reactively apply side effects to the DOM when the expression changes

Question 11

What are arguments in relation to directives?

Give two examples?

Answer 11

• An argument is a value that comes diretly after a :, after a directive
• v-bind:href="messageId"
  
  • href is the argument to v-bind
  • This tells v-bind to bind the element’s href attribute to the value of the expressions messageId
• v-on:click="handleClick"
  
  • v-on taking an argument click, which will cause v-on to bind handleClick to the actual element’s click event

Question 12

What are modifiers?

Answer 12

• Special postfixes denoted by a dot, indicating the directive should be bound in a certain way
  
  • <form v-on:submit.prevent="handleIt">...</form>
  • Tells the v-on directive to call event.preventDefault on the triggered event

Question 13

Describe the shorthands?

Answer 13

• Shorthand for v-bind:id="messageId" is `:id=”messageId”
• Shorthand for v-on:click="handleIt" is @click="handleIt"
• : and @ are valid chars for attribute names and are parsed correctly in all Vue supported browsers