The template of Vue.js is implemented based on DOM. This means that all Vue.js templates are parsable and valid HTML, and are enhanced by some special features. Vue templates are therefore fundamentally different from string-based templates, keep this in mind.
Interpolation
text
The most basic form of data binding is text interpolation, using the "Mustache" syntax (double braces):
<span>Message: {{ msg }}</span>
The Mustache tag is replaced by the value of the msg attribute of the corresponding data object. It will also be updated whenever this property changes.
You can also only process a single interpolation, and future data changes will no longer cause interpolation updates:
<span>This will never change: {{* msg }}</span>
Original HTML
The dual Mustache tag parses the data into plain text instead of HTML. In order to output real HTML strings, you need to use three Mustache tags:
<div>{{{ raw_html }}}</div>
Contents are inserted as HTML strings - data binding will be ignored. If you need to reuse template fragments, partials should be used.
It is very dangerous to dynamically render arbitrary HTML on a website because it is prone to [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). Remember to use HTML interpolation only for trusted content and never for user-submitted content.
HTML Features
Mustache tags can also be used in HTML attributes:
<div id="item-{{ id }}"></div>
Note that interpolation cannot be used within Vue.js directives and special features. Don't worry, if the Mustache tag is used in the wrong place, Vue.js will give a warning.
Bind expression
Text placed in the Mustache tag is called a binding expression. In Vue.js, a bound expression consists of a simple JavaScript expression and optionally one or more filters.
JavaScript expressions
So far, our templates are bound to only simple attribute keys. However, in fact, Vue.js supports full-featured JavaScript expressions in data binding:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
These expressions are evaluated within the scope of the Vue instance to which they belong. One limitation is that each binding can only contain a single expression, so the following statement is invalid:
<!-- This is a statement, not an expression: -->
{{ var a = 1 }}
<!-- Process control is also not possible, you can use ternary expressions instead->
{{ if (ok) { return message } }}
Filter
Vue.js allows the addition of optional "Filter" after an expression, indicating with "pipeline character":
{{ message | capitalize }}
Here we will use the value of the expression message "pipe" to the built-in capitalize filter. This filter is actually just a JavaScript function that returns the capitalized value. Vue.js provides several built-in filters, and we will talk about how to develop our own filters later.
Note that pipe syntax is not JavaScript syntax, so filters cannot be used within expressions and can only be added to the afterthought of the expression.
Filters can be connected in series:
{{ message | filterA | filterB }}
The filter can also accept parameters:
{{ message | filterA 'arg1' arg2 }}
The filter function always takes the value of the expression as the first parameter. Quoted arguments are treated as strings, while non-quoted arguments are calculated as expressions. Here, the string 'arg1' is passed to the filter as the second parameter, and the value of expression arg2 is calculated as the third parameter.
instruction
Directives are special features with the prefix v- . The value of the directive is limited to a binding expression, so the JavaScript expression and filter rules mentioned above are also applicable here. The responsibility of an instruction is to apply certain special behaviors to the DOM when the value of its expression changes. Let's look back and forth at the example in "Overview":
<p v-if="greeting">Hello!</p>
Here the v-if directive will delete/insert the <p> element according to the authenticity of the expression greeting value.
parameter
Some instructions can be separated by an "argument" after its name and a colon in the middle. For example, the v-bind directive is used to responsively update HTML features:
<a v-bind:href="url"></a>
Here href is a parameter, which tells the v-bind directive to bind the href attribute of the element to the value of the expression url. Maybe you have noticed that you can use feature interpolation {% raw %}href="{{url}}"{% endraw %} to get the same result: this is correct, and in fact, the internal feature interpolation will be converted to v-bind binding.
Another example is the v-on directive, which is used to listen for DOM events:
<a v-on:click="doSomething">
This parameter is the name of the event being listened to. We will also explain event binding in detail.
Modifier
Modifiers are special suffixes starting with half-width periods. They are used to indicate that the instructions should be bound in a special way. For example, the .literal modifier tells the directive to parse its value into a literal string instead of an expression:
<a v-bind:href.literal="/a/b/c"></a>
Of course, this doesn't seem to make sense, because we just need to use href="/a/b/c" without having to use a single instruction. This example is just to demonstrate the syntax. Later we will see more practical usages of modifiers.
abbreviation
The v-prefix is a visual hint that identifies a specific Vue feature in a template. These prefixes can be a good distinction when you need to add dynamic behavior to some existing HTML code. But when you use some common instructions, you will feel that it is always so realistic and verbose. And when building a single page application (SPA), Vue.js will manage all templates, and the v- prefix is not that important at this time. Therefore Vue.js provides special abbreviations for the two most commonly used directives v-bind and v-on:
v-bind abbreviation
<!-- Complete syntax--><a v-bind:href="url"></a><!-- Abbreviation--><a :href="url"></a><!-- Complete syntax--><button v-bind:disabled="someDynamicCondition">Button</button><!-- Abbreviation--><button :disabled="someDynamicCondition">Button</button>
v-on abbreviation
<!-- Complete syntax--><a v-on:click="doSomething"></a><!-- Abbreviation--><a @click="doSomething"></a>
They look a little different from "legal" HTML, but they are correctly parsed in all Vue.js-enabled browsers and do not appear in the final rendered tag. Abbreviation grammar is completely optional, but as you learn step by step, you will be glad to have them.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.