03. Template Syntax Flashcards
Template Syntax
allows you to declaratively bind the rendered DOM to the underlying Vue instance’s
Under the hood
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
Interpolations
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):
<span>Message: {{ msg }}</span>
The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.
Raw HTML
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span></span></p>
Attributes
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:
Using JavaScript Expressions
But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression, so the following will NOT work:
Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user defined globals in template expressions.
Directives
are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for
A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:
Arguments
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:
<a> … </a>
<a> … </a>
Dynamic Arguments
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:
<a> … </a>
Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
<a> … </a>
Dynamic Argument Value Constraints
Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
Modifiers
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
…
Shorthands
Vue provides special shorthands for two of the most often used directives, v-bind and v-on:
v-bind Shorthand
<a> … </a>
<a> … </a>
<a> … </a>
v-on Shorthand
<a> … </a>
<a> … </a>
<a> … </a>
