2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
//Command syntax:
1. What is designation and what is its purpose?
The responsibility of the directive is to react to changes in the value of the expression, and to respond to changes in the DOM.
2. All directive names in the vue framework start with v-
3. Interpolation is written in the label, and the instruction is written in
All instructions in the vue framework exist in the form of attributes of the Html tag.
For example: <span 指令写 在这 >{</span>{This is where the interpolation syntax goes}}
Note: Although the command is written in the attribute position of the tag, the browser cannot understand this command. It is necessary to compile the Vue framework first. The compiled content can be seen by the browser.
4. Syntax rules of instructions
A grammatical format of the command
<HTML 标签 v-指令名：参数 = “表达式”></HTML>
Expression, previously in interpolation syntax {{what can be written here}}, then the expression in the instruction can be written in any way, which is actually exactly the same. However, it should be noted that the expression position in the instruction cannot be added in the outer layer.{}}
Not all commands have parameters and expressions
Some instructions do not require parameters or expressions. For example: v-once
Some instructions do not require parameters, but require expressions, for example: v-if = "expression"
Some instructions require both parameters and expressions. For example: v-bind: parameter = "expression"
Effect: Render the element only once, and then re-render. The element and all its child nodes will be saved as static memory and skipped, which can be used to optimize update performance.
Function: The result of the expression execution requires a Boolean data type: true or false
true: The tag where this instruction is located will be rendered into the browser
false: The tag where this directive is located will not be rendered in the browser
<body>
<div id ='app'>
<h1>{{msg}}</h1/>
<h1 v-once> {{msg}} </h1>
<h1 v-if="a>b"> test:{{msg}} </h1>
</div>
<script>
new Vue （{
el : '#app'
data(){
msg : ' qwert'
a : ' 20'
b : ' 21'
}
}）
</scirpt>
</body>
I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.
