This is the 29th day of my participation in the August More Text Challenge

The template syntax of VUE includes interpolation syntax and instruction syntax

The interpolation of grammar

{{}}

<div class="root">
    <h1>Hello,{{name}}</h1>
  </div>
  <script>
    // Create a vue instance
    new Vue({
      el: '.root'.// Write as an object
      data: {
        name: 'Sun Shangxiang'}})</script>
Copy the code

Command syntax

We want to write dynamic hyperlinks. How do we do that?

We find it impossible to add the href attribute to using interpolation syntax. And errors will be reported

If we examine the element, we can see that it resolves the variable into a string again.

Finding an error, he prompts that the syntax has been removed and uses V-bind

V-bind One-way binding

Use v – bind

Everything between the v-bind quotes will be parsed into JS expressions. It’s not a string.

   <a v-bind:href="href"> jump < / a >Copy the code

V-bind stands for:

 <a :href="href"> jump < / a >Copy the code

V-model bidirectional binding

V-bind is actually one-way. If we want to assign a value to the input field and change the content of the input field, the value will also change. This is where the V-Model comes in

<div class="root">
    <h1>Hello,{{name}}</h1>
    <a v-bind:href="href">jump</a>
    <input v-model="href">
  </div>
  <script>
    // Create a vue instance
    new Vue({
      el: '.root'.// Write as an object
      data: {
        name: 'Sun Shangxiang'.href:'http://www.baidu.com'}})</script>
Copy the code

When we type in the input box, the href value changes, and v-bind is one-way, so the jump address of the href property changes.

I’ll just use two-way binding v-Models everywhere from now on. ⚠️ This is not true. If you use v-model in the

tag, you will get an error.

<h1 v-model="name"></h1>
Copy the code

The V-Model can only be applied to form elements (input class elements) because form elements interact with the user, while<h1>There will be no interaction

Usage scenarios

Interpolation syntax:

{{name}}

Instruction syntax:

For attributes in the tag . And you can use the short form:

Used for tag body and binding events.