Close read Vue official documentation series 🎉

Template syntax

Vue templates use HTML-based template syntax, and the underlying “render function” compiles the template and responsive data into a “virtual DOM” for rendering. If you need more freedom and flexibility with templates, you can write render functions without HTML-style templates, and optionally use JSX syntax.


Title text
 Title text Title text Using a “render function” approach offers great flexibility, such as creating a dynamically generated createElement(‘h’ + level, this.$slot.default) tag name.

The interpolation

“Interpolation” is used to output data. Vue refers to this as “data binding”, which figuratively means exporting reactive data (bound data on a component instance) to a template for presentation.

The interpolation syntax in Vue is Mustache (double brace style), where the final output of interpolation must be of text character type (although the interpolation syntax supports the execution of some expressions, the result is always of text type).

<p> {{msg.info}}</p>
Copy the code

By using the V-once instruction, you can control the interpolation to be performed only once (when responsive data changes, the contents of the interpolation are not updated).

<p v-once> {{msg.info}}</p>
<h3>{{msg.info}}</h3>
Copy the code

In the pure javascript-driven version, template strings are compiled asynchronously by the Vue compilation engine. If the browsing Event Loop has a delay or waits too long, the interpolation in the template {{… }} may be rendered directly to the browser interface without processing. The solution is to inline the [V-cloak]{display: None} style in the HTML and combine it with the V-cloak instruction.

Raw HTML

Interpolation always outputs the content as plain text, not HTML code. If you need to output HTML code, you can use the V-HTML directive:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Copy the code

To prevent XSS attacks, never use this directive to output user-supplied content.

Attribute

Interpolation cannot output responsive data to html-attribute. If you need to bind responsive data to an Attribute, you can use the V-bind command, which supports shorthand:

<button v-bind:disabled="isDisabled"></button>
<button :disabled="isDisabled"></button>
Copy the code

So, how to assign an Attribute that receives non-responsive data that is a normal string? The answer is simple, just use the HTML tag attribute assignment method:

<button type="button"></button>
Copy the code

JavaScript expression

Vue’s interpolation syntax (including the attribute binding V-bind directive) supports the execution of JavaScript expressions, but not JavaScript statements.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
Copy the code

These expressions are parsed and executed as JavaScript in the data scope of the owning Vue instance. It can only access variables exposed by Vue instances (such as reactive data) and global variables that have been whitelisted. You should not attempt to access user-defined global variables in template expressions.

instruction

The Vue directive is essentially an HTML Attribute prefixed with v-* to provide a visual indication. The value of the Vue directive allows you to receive a JavaScript expression. The purpose of the Vue directive is to affect the DOM state by changing the value of the response.

Therefore, we can conclude that the directive mainly targets and acts on the underlying DOM objects.

parameter

Some instructions can accept a “parameter” in the form of a colon separating the instruction name from the parameter name, and the parameter can have a parameter value.

<a v-bind:href="url"></a>
<button v-on:click="do()"></button>
Copy the code

The dynamic parameters

The parameter names of Vue directives can be variables enclosed in square brackets or values of JavaScript expressions.

<a v-bind[attributeName] ="url"></a>
<button v-on[eventName] ="do()"></button>
Copy the code
  1. Note that expressions cannot contain Spaces or quotation marks, which are invalid in HTML attribute names.
  2. Note that parameter names cannot contain uppercase letters. HTML tag attribute names are automatically converted to lowercase by the browser.
  3. It is recommended to use computed properties instead of expressions.

The modifier

The Modifer is an additional suffix for a directive that indicates that a directive should be bound in a particular way, such as.prevent.

abbreviations

In SFC(single-file component), V-on can be abbreviated to @, and v-bind can be:.

<! -- Dynamic parameters -->
<a :[key] ="url">.</a>
<button@ [event] ="do">click</button>
Copy the code