2.7. Vue3 template syntax

Vue uses HTML-based template syntax, which allows developers to declaratively bind DOM to the data of the underlying Vue instance.

The core of Vue is a system that allows you to use concise template syntax to declaratively render data into DOM.

Combined with the response system, when the application state changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations.

2.7.1. Interpolation. ¶

2.7.2. Text ¶

The most common form of data binding is to use the {{...}} text interpolation (double curly braces):

Text interpolation ¶

<divid="app"><p>{{ message }}</p></div>

The content of the {{...}} tag will be replaced with the value of the message attribute in the corresponding component instance. If the value of the message attribute changes, the content of the {{...}} tag will also be updated.

If you do not want to change the contents of the tag, you can use the v-once the instruction performs one-time interpolation, and when the data changes, the contents of the interpolation are not updated.

<span v-once>This will not change: {{ message }}</span>

2.7.3. Html ¶

Use v-html instruction is used for output html code:

`v-html` instruction ¶

<divid="example1"class="demo"><p>Text interpolation using double curly braces: {{ rawHtml
}}</p><p>Use v-html
Order:<spanv-html="rawHtml"></span></p></div><script>const RenderHtmlApp
= { data() { return { rawHtml: '<spanstyle="color:
red">This will display red！</span>' } } }
Vue.createApp(RenderHtmlApp).mount('#example1')</script>

2.7.4. Attribute ¶

The value in the HTML property should use the v-bind instructions.

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

For Boolean attributes, the regular values are either true or false . If the attribute value is null or undefined , the attribute will not be displayed.

<button v-bind:disabled="isButtonDisabled">button</button>

If in the above code isButtonDisabled the value of null or undefined , then disabled properties are not even included in the rendered <button> element.

The following example determines use if the value is true use class1 class, otherwise the class is not used

`v-bind` instruction ¶

<divid="app"><labelfor="r1">Modify Color</label><inputtype="checkbox"v-model="use"id="r1"><br><br><divv-bind:class="{'class1':
use}">v-bind:class order</div></div><script>const app = { data() { return
{ use: false } } } Vue.createApp(app).mount('#app')</script>

2.7.5. Expression. ¶

Vue.js all provide full JavaScript expression support.

JavaScript expression ¶

<divid="app">{{5+5}}<br>{{ ok ? 'YES' : 'NO' }}<br>{{
message.split('').reverse().join('') }}<divv-bind:id="'list-' +
id">Rookie Tutorial</div></div><script>const app = { data() { return { ok:
true, message: 'RUNOOB!!', id: 1 } } }
Vue.createApp(app).mount('#app')</script>

The expression will be parsed as JavaScript within the data scope of the current activity instance. There is a limitation that each binding can only contain a single expression, so the following examples will not take effect:

<!--  This is a statement, not an expression：-->
{{ var a = 1 }}

<!-- Flow control will not take effect, please use a ternary expression -->
{{ if (ok) { return message } }}

2.7.6. Instruction ¶

The instruction is with v- the special property of the prefix.

Directive is used to apply certain behaviors to the DOM when the value of the expression changes. Examples are as follows:

Example ¶

<divid="app"><pv-if="seen">Now you see me</p></div><script>const app = {
data() { return { seen: true /\* Change to false, the information cannot be displayed \*/ } } }
Vue.createApp(app).mount('#app')</script>

Here, the v-if instruction will determine whether to insert the p element based on the value of the expression seen ( true or false ).

There are many other instructions, each with a special function. For example, v-for the command can bind the data of the array to render a list of items:

Example ¶

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}
Vue.createApp(app).mount('#app')
</script>

2.7.7. Parameters. ¶

The parameter is indicated by a colon after the instruction. For example, the v-bind instruction is used to update HTML attributes in response:

Example ¶

<divid="app"><p><av-bind:href="url">Rookie Tutorial</a></p></div><script>const
app = { data() { return { url: 'https://www.runoob.com' } } }
Vue.createApp(app).mount('#app')</script>

Here href is a parameter, inform v-bind instruction sets the element s href attributes and expressions url the value binding.

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

<!-- Complete grammar -->
<a v-on:click="doSomething"> ... </a>

<!-- abbreviation -->
<a @click="doSomething"> ... </a>

<!-- Abbreviation for dynamic parameters (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Here, the parameter is the name of the listening event.

2.7.8. Modifier ¶

The modifier is a full stop in half a corner. A special suffix specified to indicate that an instruction should be bound in a special manner. For example, .prevent ihe modifier tells you v-on instruction is called for the triggered event event.preventDefault() :

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

2.7.9. User input ¶

In input the input box, we can use v-model directive to implement two-way data binding

Bidirectional data binding ¶

<divid="app"><p>{{ message
}}</p><inputv-model="message"></div><script>const app = { data() {
return { message: 'Runoob!' } } }
Vue.createApp(app).mount('#app')</script>

v-model instruction is used in input , select , textarea , checkbox create bidirectional data binding on form control elements such as radio, and automatically update the values of the bound elements based on the values on the form.

Button event we can use the v-on listens for events and responds to user input.

The following example reverses the string after the user clicks the button:

String inversion ¶

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue Test Example -
Rookie Tutorial(runoob.com)</title><scriptsrc="https://unpkg.com/vue@next"></script></head><body><divid="app"><p>{{
message
}}</p><buttonv-on:click="reverseMessage">Invert String</button></div><script>const
app = { data() { return { message: 'Runoob!' } }, methods: {
reverseMessage() { this.message = this.message .split('') .reverse()
.join('') } } } Vue.createApp(app).mount('#app')</script>

2.7.10. Abbreviations ¶

2.7.11. `v-bind` abbreviations ¶

Vue.js provides special abbreviations for the two most commonly used instructions:

<!-- Complete grammar -->
<a v-bind:href="url"></a>
<!-- abbreviation -->
<a :href="url"></a>

`v-on` abbreviations ¶

<!-- Complete grammar -->
<a v-on:click="doSomething"></a>
<!-- abbreviation -->
<a @click="doSomething"></a>