Vue template syntax directive syntax v-bind

The red boxes inside are all vue templates. With templates, you need special syntax for templates. The above is just a simple double bracket plus an expression. This is called interpolation syntax. Is there any other syntax besides this syntax?

(1) The function implemented by the interpolation syntax is very simple, which is to put the specified value at the specified position. (2) There is another type called instruction syntax, which is relatively high-end in what it can accomplish.

There are many instructions in vue, all starting with v-. The following is actually binding the execution result to v-bind

<a v-bind:href="url">点击我去百度</a>   
//如果加上v-bind:，那么vue会将引号里面包着的东西url拿出来当js表达式去执行，url就相对于变量
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
          }
       })

v-bind can specify any attribute, bind can dynamically bind a value to any label attribute in the label, v-bind: can be abbreviated as: colon.

    <div id="app">
        <h1>hello world name:{
   
   {name}}</h1>
        <a v-bind:href="url" v-bind:x="hello">点击我去百度</a>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
            hello: "xxx",
          }
       })

As you can see from the above, interpolation syntax is often used to specify the content of the tag body, which is the middle part of the html element. This part requires rendering using interpolation syntax.

v-bind does not manage the content in the tag, it is used to manage the attributes of the tag.

There are two main categories of Vue template syntax: interpolation syntax and directive syntax.

1. Interpolation syntax:

Function: Used to parse tag body content.

Writing: { {xxx}}, xxx is a js expression, and all attributes in data can be read directly.

2. Instruction syntax:

Function: Used to parse tags (including:tag attributes, tag body content, binding events...).

Example: v-bind:href="xxx" or abbreviated as:href="xxx",xxx also needs to write js expression and can be read directly to all attributes in data.

Note: There are many instructions in Vue, all in the form: v-????, here we just take v-bind as an example.

In data, can not only be a basic data type, but also an object, so the data in data can be a multi-level structure.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入vue,这里引入vue那么这里就多了vue构造函数-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>  
    <div id="app">
        <h1>hello world name:{
   
   {name}} school里面的name:{
   
   {school.name}}</h1>
        <a v-bind:href="school.url" v-bind:x="hello">点击我去百度</a>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            school:{
                name: "jerry",
                url: "https://www.baidu.com",
            },
          }
       })
    </script>
 
</body>
</html>

There is no advanced method for interpolation syntax, just two pairs of curly braces { {}}Write the expression inside.

Vue template syntax directive syntax v-bind

Guess you like