VueEnlightenment! Template syntax – interpolation syntax & directive syntax

Template syntax

Vue template syntax includes two major categories

  1. Interpolation syntax

Interpolation syntax is two curly brackets, also called Mustache

Function: Used to parse the content of the tag body. It can perform calculations, ternary expressions, etc., and insert the final parsed content into the tag.

Writing method: {{xxx}}, xxx is a js expression, which can directly read all areas in data

  • Only single expression can be placed in the interpolation expression, and statement blocks, loops, conditional statements, etc. are not supported.

  • The content in the interpolation expression will be interpreted as a JS expression, so you can perform basic JS operations, function calls, conditional judgments, etc.

  • If more complex logic is required, it should be implemented using computed properties, methods or instructions – which will be discussed later.

  • In the interpolation expression, you use the property name directly (without this), and Vue.js will automatically recognize and bind the expression to the data of the Vue instance because Vue will automatically handle these details during the template compilation process.

  1. Command syntax

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

For example: or abbreviated as , xxx also needs to write js expression, you can Directly read all attributes in data

Note: There are many instructions in Vue, and the formats are all v-xxx. Here we just take v-bind as an example.

Code

<div id="root">
   <!-- Common writing -->
   <!-- One-way data binding: <input type="text" v-bind:value="name"><br/>
   Two-way data binding: <input type="text" v-model:value="name"><br/> -->

   <!-- Abbreviation -->
   One-way data binding: <input type="text" :value="name"><br/>
   Two-way data binding: <input type="text" v-model="name"><br/>

   <!--v-model can only be applied to form elements (input elements) -->
   <!-- <h2 v-model:x="name">Wrong</h2> -->
  </div>
 </body>

 <script type="text/JS">
  Vue.config.productionTip = false //Prevent vue from generating production tips at startup

  newVue({
   el:'#root',
   data:{
    name:'Impromptu Little Sochi'
   }
  })
 </script>

Expand

  • All instructions in vue start with v-

  • When outputting a vue instance, check with f12. The ones with $ symbols in them are for our use. The ones ending with underscore _ are for the bottom layer of vue, not for us.

  • Functions will all have prototype, except Function.prototype.bind()

  • Objects will all have __proto__, except Object.prototype (in fact, it also exists, it is just null)

  • All functions are created from Function, which means their __proto__ is equal to Function.prototype

  • Function.prototype is equal to Function.__proto__

Specifically the vue example

  • The ones starting with _ represent Vue internal attributes, such as _isVue, _uid, etc. Do not change the attributes directly.

  • The ones starting with $ represent the instance attributes/methods added by Vue, such as , refs, , emit, etc. (can be called directly by vue.$)

  • The pink ones are responsive attributes, that is, the data bound to the template, which are defined in data, computed, etc. They can be modified directly to trigger responsive updates.

  • The ordinary black attribute is an ordinary attribute that may be additionally defined by the user and is not responsive.

Therefore, when printing Vue instances, the functions of attributes can be distinguished according to different symbols. This can help us better understand and use Vue. Please note that only the data in data and computed is responsive

There is no concept of class in JS, and inheritance is mainly realized through the prototype chain. Normally, inheritance means copying operations, but in JS, objects are not copied by default. Properties, on the contrary, JS just creates an association (prototype object pointer) between two objects. In this way, it can be simply understood as delegation (inheritance), and one object can access the properties of another object through delegation. Properties and functions, so instead of calling it inheritance, delegation is more accurate.

When you want to find an attribute or method that is not on the prototype of your own object, you will go up level by level along the prototype chain s1===>s1.__proto__==>s1.__proto__.__proto__== >s1.__proto__.__proto__.__proto__==>null

const c = new Vue({
   el:'#root',
   data:{
    name:'Impromptu Little Sochi'
   }
  })
        console.log(c);

The name in the picture is the data agent (will be discussed later – a simple understanding is to modify the data that can change)

image-20230807012433413

image-20230807012433413

image-20230807013614066

image-20230807013614066

Interpolation syntax

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Template syntax</title>
  <!-- Introducing Vue -->
  <script type="text/JS" src="../js/vue.js"></script>
 </head>
 <body>
  <div id="root">
   <h1>Interpolation syntax</h1>
   <h3>Hello, {<!-- -->{name}}</h3>
   <hr/>
   <h1>Command syntax</h1>
   <a v-bind:href="school.url.toUpperCase()" x="hello">Click me to study at {<!-- -->{school.name}}1</a>
   <a :href="school.url" x="hello">Click me to go to {<!-- -->{school.name}} to study 2</a>
  </div>
 </body>

 <script type="text/JS">
  Vue.config.productionTip = false //Prevent vue from generating production tips at startup

  newVue({
   el:'#root',
   data:{
    name:'jack',
    school:{
     name:'suoqi-teacher,
     url:'https://github.com/suoqi',
    }
   }
  })
 </script>
</html>

image.png

image.png

Data binding

There are 2 ways of data binding in Vue

  • v-bind: One-way binding, data can only flow from data to the page

  • v-model: two-way binding, data and page are interoperable, and either side can be changed.

Remark

  • v-model: Two-way binding is generally applied to form elements, such as ``