Vue.js Study Template Grammar detailed

This article and we share the main is Vue.js template grammar, hope to everyone learn vue.js help, come together to see it.

Vue.js uses HTML-based template syntax, which allows developers to declaratively bind the DOM to data from the underlying Vue instance. All Vue.js templates are legitimate HTML, so they can be parsed by a browser and HTML parser that follows the specification.

At the bottom of the implementation, Vue compiles the template into a virtual DOM rendering function. In conjunction with the response system, Vue intelligently calculates the minimum cost of re-rendering the component and applies it to DOM operations when the application state changes.

If you are familiar with virtual DOM and prefer the original power of JavaScript, you can also use the optional JSX syntax without a template to write the render function directly .

Interpolated values

Text

The most common form of data binding is the text interpolation using the "mustache" syntax (double braces):

<span>message: {{msg}}</span>

The mustache tag will be substituted for the value of the msg attribute on the corresponding data object. Whenever the msg attribute on the bound data object has changed, the contents of the interpolated value are updated.

You can also perform a one-time interpolation by using the V-once directive, and the contents of the interpolation will not be updated when the data changes. But be aware that this affects all data bindings on that node:

<span V-once>this would never change: {{msg}}</span>

Pure HTML

Double braces interpret the data as plain text, not HTML. In order to output real HTML, you need to use the v-html directive:

<div v-html= "rawhtml" ></div>

The inserted content will be treated as html--data binding is ignored. Note that you cannot use v-html to compound a local template because Vue is not a string-based template engine. Components are more suitable as basic units for UI reuse and compositing.

Any HTML that is dynamically rendered on your site can be dangerous because it easily causes XSS attacks . Use HTML interpolation for trusted content only, and never interpolate user-supplied content.

Property

Mustache cannot be used in HTML attributes, the v-bind directive should be used:

<div v-bind:id= "Dynamicid" ></div>

This property is also valid for Boolean values--if the condition is evaluated to false, the property is removed:

<button v-bind:disabled= "Somedynamiccondition" >Button</button>

Using JavaScript expressions

So far, in our template, we have been binding only simple property key values. But in fact, for all data bindings, Vue.js provides full JavaScript expression support.

{{number + 1}}

{OK?} ' YES ': ' NO '}}

{{Message.split ('). Reverse (). Join (')}}

<div v-bind:id= "' list-' + ID" ></div>

These expressions are parsed as JavaScript under the data scope of the owning Vue instance. One limitation is that each binding can contain only a single expression , so the following example will not take effect.

<!--This is a statement, not an expression--

{{var a = 1}}

<!--flow control does not take effect, use ternary expressions--

{{if (OK) {return message}}}

Template expressions are placed in a sandbox and can only access a white list of global variables, such as Math and Date. You should not attempt to access user-defined global variables in template expressions.

Instructions

Directive (directives) is a special property with a v -prefix. The value of the Directive property is expected to be a single JavaScript expression (except v-for , which is discussed later). The duty of an instruction is to apply certain behaviors to the DOM accordingly when the value of its expression changes. Let's take a look at the examples in the introduction:

<p v-if= "Seen" >now you see me</p>

Here, the v-if instruction will be removed/inserted according to the true or false value of the expression seen

Elements.

Parameters

Some directives can accept a "parameter", which is indicated by a colon after the instruction. For example, the v-bind directive is used in response to update HTML attributes:

<a v-bind:href= "url" ></a>

Here the href is a parameter that tells the v-bind directive to bind the href attribute of the element to the value of the expression URL .

Another example is the v-on directive, which is used to listen for DOM events:

<a v-on: click= "DoSomething" >

Here the parameter is the event name of the listener. We will also discuss event handling in more detail.

Modifier

The modifier (Modifiers) is a half-width period . specifies a special suffix that indicates that a specified should be bound in a special way. For example, the . Prevent Modifier tells the v-on directive to invoke Event.preventdefault () for the triggered event:

<form v-on:submit.prevent= "OnSubmit" ></form>

Later, when we have a deeper understanding of v-on and V-model , we see more modifiers used.

Filter filters

Vue.js allows you to customize the filter to be used as some common text formatting. The filter should be added at the end of the mustache interpolation , indicated by the "pipe symbol":

{{message | capitalize}}

<!--in mustaches--

{{message | capitalize}}

<!--in V-bind--

<div v-bind:id= "Rawid | FormatID "></div>

In Vue 2.x, filters can only be used in mustache bindings and v-bind expressions (starting with 2.1.0 support) because the filter is designed to be used for text conversions. In order to implement more complex data transformations in other directives, you should use computed properties.

The filter function always accepts the value of the expression as the first argument.

New Vue ({

// ...

Filters: {

Capitalize:function (value) {

if (! value) return ’’

value = value. toString ()

return value. charAt (0). toUpperCase () + value. Slice (1)

}

}

})

Filters can be concatenated:

{{message | filtera | filterb}}

Filters are JavaScript functions, so you can accept parameters:

{{message | FilterA (' arg1 ', Arg2}}}

Here, the string ' Arg1 ' is passed to the filter as the second argument, and the value of the arg2 expression is evaluated and then passed to the filter as the third parameter.

Abbreviation

The v -prefix is an obvious identifier in the template as a special attribute of the Vue. It can be useful when you use Vue.js to add dynamic behavior to an existing tag, but it is a bit cumbersome for some frequently used instructions. At the same time, the v -prefix becomes less important when building vue.js to manage all the templates in the SPA . As a result, Vue.js provides special abbreviations for the two most commonly used directives:

V-bind abbreviation

<!--full grammar--

<a v-bind:href= "url" ></a>

<!--abbreviations--

<a:href= "url" ></a>

v-on abbreviation

<!--full grammar--

<a v-on:click= "DoSomething" ></a>

<!--abbreviations--

<a @click = "DoSomething" ></a>

They may look slightly different than normal HTML, but : with @ is a valid character for the property name, all browsers that support vue.js can be parsed correctly. Also, they do not appear in the final rendered markup. The abbreviation syntax is completely optional, but as you gain a deeper understanding of what they do, you'll be glad to have them.

Source: Zhong Cheng Translation

Vue.js Study Template Grammar detailed