1. Background analysis
Traditional html does not support the definition of expressions, branch statements, circular statements and other structures. In order to make up for its shortcomings, many front-end frameworks use the template engine to enhance the function of html by adding custom attributes to html elements, and then the bottom layer processes html custom attributes with the help of the parsing engine.
2. Common instructions in Vue
v-bind
In html, if you want the attribute value of an element to change with the program content, you can use v-bind or: instead. Its basic syntax is as follows:
<element v-bind:Attribute name="Variable or js expression">
Its simplified form can also be adopted, and its basic syntax is as follows:
<element :Attribute name="Variable or js expression">
Case study:
<div id="app">
<font :color="color">hello</font>
</div>
<script>
new Vue({
el:"#app",
data:{
color:"red"
}
});
</script>
v-show
v-show is a special instruction that specifically controls the display and hiding of elements. Its basic syntax is:
<element v-show="bool Variable or return of type bool Type js Expression>
When the Vue object is scanned to v-show, the variable or js expression in "" will be executed immediately,
If the value of a variable or js expression is true, nothing is done and the element remains displayed as it is. If the value of a variable or js expression is false, new Vue() automatically adds display:none to the current element.
Example key codes are as follows:
<style>
.pop{
width:300px; height:150px;
background-color:lightGreen;
}
.pop>.close{
float:right;
padding:5px 10px;
cursor:pointer;
}
</style>
<div id="app">
<button @click="show">show</button>
<div v-show="display" class="pop">
<span class="close" @click="hide">×</span>
</div>
</div>
<script>
//2. Create a new Vue object
new Vue({
el:"#app",
data:{
display:false
},
methods:{
show(){
this.display=true;
},
hide(){
this.display=false;
}
}
})
</script>
v-if and v-else
v-if and v-else are two ways to implement branch control in html. When in use, the two elements corresponding to v-if and v-else must be written next to each other! Other elements cannot be inserted in the middle. Its basic syntax is:
<Element 1 v-if="boolean Variable or of type js expression"> <Element 2 v-else>
Example key codes are as follows:
<div id="app">
<!--first div Is what is displayed when you are logged in-->
<div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">cancellation</a></h3></div>
<!--the second div Is what is displayed when you are not logged in-->
<div v-else><a href="javascript:;" @click="login">Sign in</a> | <a href="javascript:;">register</a></div>
</div>
<script>
new Vue({
el:"#app",
data:{
isLogin:false //The opening user is not logged in by default
},
methods:{
login(){
this.isLogin=true;
},
logout(){
this.isLogin=false;
}
}
})
</script>
v-else-if
v-else-if is specially used with v-if to control the display of multiple elements. The basic syntax is:
<Element 1 v-if="Condition 1"> <Element 2 v-else-if="Condition 2"> <Element 3 v-else-if="Condition 3"> ... ... <element n v-else>
Note that v-if and v-else-if and v-else must be written together and no other elements can be inserted.
Example key codes are as follows:
<div id="app">
<span v-if="score>=90">excellent</span>
<span v-else-if="score>=80">good</span>
<span v-else-if="score>=70">pass</span>
<span v-else>pass</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
score:95
}
})
//In the console: VM socre=85
</script>
v-for
v-for is a special instruction for repeatedly generating multiple elements with the same structure according to the contents of the array. Its syntax is:
<Elements to be generated repeatedly v-for="(Current element value, current location) of array">
Example key codes are as follows:
<div id="app">
<!--demand: according to tasks The task list in the array generates multiple tasks repeatedly li-->
<ul>
<li v-for="(t,i) of tasks" :key="i">
{{i+1}} - {{t}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//Save the to-do list with an array
tasks:["having dinner", "sleep"]
}
})
</script>
v-for can also traverse object attributes, for example:
<div id="app">
<!--demand: ergodic lilei Object to display the details of Li Lei's object on the page-->
<ul>
<li v-for="(value,key) of lilei" :key="key">
{{key}} : {{value}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
lilei:{
name:"Li Lei",
age:11
}
}
})
</script>
v-for can also count, for example:
<div id="app">
<ul>
<li v-for="i of pageCount" :key="i">{{i}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
pageCount:5 //Total 5 pages
}
})
</script>
v-on
v-on is an instruction that specifically binds event handling functions. Its basic syntax is:
<element v-on:Event name="Event handler name()">
v-on can also be replaced by @ symbol, and its basic syntax structure is:
<element @Event name="Event handler name()
If the event handler does not need to pass in an argument value, then () can also be omitted, for example:
<element @Event name="Event handler name">
Example key codes are as follows:
<div id="app">
<!--Which one div，which one? div You can call yourself pain!-->
<div id="d1" @click="say('html')">d1</div>
<div id="d2" @click="say('css')">d2</div>
</div>
<script>
new Vue({
el:"#app",
methods:{
say(name){
console.log(`hello ${name}!`)
}
}
})
<script>
v-html
If {}} is bound to an HTML fragment, it will not be handed over to the browser for parsing. Instead, the content of the HTML fragment is displayed as it is - the same as the textContent in the DOM. If you want HTML to be parsed, you can use v-html instead of {}. Its basic syntax structure is:
<element v-html="variable"> This position displays the contents of the variable </element>
Example key codes are as follows:
<div id="app">
<h3>{{msg}}</h3>
<h3 v-html="msg"></h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:`come from<<<a href="javascript:;">Xinhua News Agency</a>>>News of`
}
})
</script>
v-text
v-text is a special instruction that can replace {}} binding element content. It is used to set the text content inside the element, and can prevent the short display of {}} due to network delay. Its syntax is:
<element v-text="Variable or js expression"> </element>
Example key codes are as follows:
<div id="app">
<!--js The world of -->
<h3 v-text=`user name:${uname}`></h3>
<!--js The world of -->
<h3 v-text=`integral:${score}`></h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:"#app",
data:{
uname:"dingding",
score:1000
}
})
},6000)
</script>
v-model
v-model is an instruction used to realize two-way binding. It can not only automatically update the changes in the program to the page (model - > View), but also update the changes on the page back to the variables in the program (view - > model). Its basic syntax is:
<Form Elements v-model:value="variable">
Example key codes are as follows:
<div id="app">
<!--Unidirectional binding: (Model->View No View->Model)-->
<!-- <input :value="keyword"> -->
<!--Bidirectional binding: (Model->View Again View->Model)-->
<input v-model:value="keyword">
<button @click="doUpdate">to update</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
keyword:"ABC" //The opening user did not enter any keywords
},
methods:{
doUpdate(){
console.log(`lookup ${this.keyword} Related content...`)
}
}
})
<script>
Bidirectional binding of radio operation
The value of the radio operation is a fixed alternative value because it is written dead! When users switch the selected state before different radios, what they actually change is the checked attribute value of the radio. Therefore, if you want to obtain the value of the currently selected radio by two-way binding, you should bind the checked attribute:
<input type="radio" value="Fixed value" v-model:checked="variable">
The example code is as follows:
<div id="app">
Gender:
<label><input type="radio" name="sex" value="1" v-model:checked="sex">male</label>
<label><input type="radio" name="sex" value="0" v-model:checked="sex">female</label>
<h3>What gender do you choose:{{sex==1?"male":"female"}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:1
}
})
</script>
Bidirectional binding of select element
A select contains multiple option elements. All alternative values, value, are distributed on each option. But each alternative value value is also written dead. Each time a user selects a different option, the select element will modify the value value of the selected option to the value attribute of the select. Its syntax is:
<select v-model:value="variable"> <option value="Value 1">xxx</option> ... ... ... ... </select>
The example code is as follows:
<div id="app">
<select v-model:value="src">
<option value="beijing">Beijing</option>
<option value="shanghai">Shanghai</option>
<option value="hangzhou">Hangzhou</option>
</select><br/>
<img :src="src">
</div>
<script>
new Vue({
el:"#app",
data:{
src:"beijing"
}
})
</script>
Summary
This section mainly analyzes some instruction elements commonly used in vue. In the process of understanding and application, you can refer to this document and official documents and skillfully apply them in combination with practice