Template syntax
Vue template syntax includes two major categories
-
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.
-
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
, exceptFunction.prototype.bind()
-
Objects will all have
__proto__
, exceptObject.prototype
(in fact, it also exists, it is justnull
) -
All functions are created from Function, which means their
__proto__
is equal toFunction.prototype
-
Function.prototype
is equal toFunction.__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-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
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
``
, etc. If used as a title, an error will be reported because of this design Taking into account the two-way impact of the page (for example, if the title does not have a value input, how can it affect data changes? It is meaningless) -
v-model:value can be abbreviated as v-model, because v-model collects value by default.
-
v-bind:value can be abbreviated as:value
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Data binding</title> <!-- Introducing Vue --> <script type="text/JS" src="../js/vue.js"></script> </head> <body> <!-- Prepare a container--> <div id="root"> One-way data binding: <input type="text" :value="name"><br/> Two-way data binding: <input type="text" v-model="name"><br/> <!-- The following code is wrong because v-model can only be applied to form elements (input elements) --> <!-- <h2 v-model:x="name">hello</h2> --> </div> </body> <script type="text/JS"> Vue.config.productionTip = false //Prevent vue from generating production tips at startup newVue({ el:'#root', // Attribute names in data can also be quoted, but are often not quoted. data:{ name:'Impromptu Little Sochi' } }) </script> </html>
image-20230807005208611
Note
In interpolation, {{method()}}
and {{method}}
are completely different
-
The former is to insert the return value of the method
-
The latter is completely functional interpolation
If it is useful to you, please give me a free thumbs up~