catalogue
5, Calculation properties & listening properties
1, Interpolation
1.1 text {msg}
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- vue Related dependencies of -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary Es6 Concrete embodiment of -->
<div id="app">
<p>text</p>
<h3>{{msg}}</h3>
<p>html strand</p>
<div v-html="htmlstr">
</div>
</div>
</body>
<script type="text/javascript">
// Binding boundary
new Vue({
el: '#app',
data() {
return {
// ctrl+k format
msg: 'vue Your uncle',
htmlstr: '<h3 style="color:red;">This is a html fragment</h3>'
};
}
})
</script>
</html>
Display results:
2, HTML string: keyword: v-html = "attribute"
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>'
}
}
})
</script>
</body>
</html>Operation results:
3. Vue attribute: keyword: v-bind = "attribute", or abbreviation: (:).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<hr/>
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
<hr />
<p>3.vue Properties in</p>
<!-- All original ecological attributes should be utilized vue All variables need to be added in front of the corresponding attribute v-binc -->
<a v-bind:href="hrefstr">use Baidu Search</a>
<input :value="valuestr"/>
<hr />
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>',
hrefstr: 'http://www.baidu.com',
valuestr:'2223 ',
}
}
})
</script>
</body>
</html>Operation results:
1. Click Baidu link to jump to Baidu official website:
2. v-bind abbreviated version: set a valuestr in data, assign some values, and then use a text box (written inside: value="valuestr")
4. Expression:
4.1 vue contains built-in functions
Vue provides full JavaScript expression support
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
< Li v-bind: Id = "'List - '+ Id" > my Id is dynamically generated by js</li>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<hr />
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
<hr />
<p>3.attribute</p>
<a v-bind:href="hrefstr">use Baidu Search</a>
<input :value="valuestr"/>
<hr />
<p>4.expression Vue Provides complete JavaScript Expression support</p>
<p>4.1 vue Contains built-in functions/p>
{{str.substring(0,4).toUpperCase()}}
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>',
hrefstr: 'http://www.baidu.com',
valuestr:'2223 ',
str:'java It's the best language',
})
</script>
</body>
</html>Operation results:
4.2vue can support operation
Code: define a number in data and write {{number + 1}} in the boundary
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<hr />
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
<hr />
<p>3.attribute</p>
<a v-bind:href="hrefstr">use Baidu Search</a>
<input :value="valuestr"/>
<hr />
<p>4.expression Vue Provides complete JavaScript Expression support</p>
<p>4.1 vue Contains built-in functions/p>
{{str.substring(0,4).toUpperCase()}}
<p>4.2vue Can support operations</p>
Zhang San:{{number+1}}
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>',
hrefstr: 'http://www.baidu.com',
valuestr:'2223 ',
str:'java It's the best language',
number:59,
})
</script>
</body>
</html>Operation results:
4.3vue support ternary operation
Code: assign an attribute to boolean type in data, and write {{OK?'Yes':'No '}} in the boundary
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<hr />
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
<hr />
<p>3.attribute</p>
<a v-bind:href="hrefstr">use Baidu Search</a>
<input :value="valuestr"/>
<hr />
<p>4.expression Vue Provides complete JavaScript Expression support</p>
<p>4.1 vue Contains built-in functions/p>
{{str.substring(0,4).toUpperCase()}}
<p>4.2vue Can support operations</p>
Zhang San:{{number+1}}
<p>4.3vue Support ternary operation</p>
{{ok ? 'yes':'no'}}
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>',
hrefstr: 'http://www.baidu.com',
valuestr:'2223 ',
str:'java It's the best language',
number:59,
ok:true,
})
</script>
</body>
</html>Operation results:
4.4vue support string splicing:
Code: define and assign an ID in data, and write it in the boundary < span: id = "'id_ '+ ID" >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>1.text</p>
<h3>{{msg}}</h3>
<hr />
<p>2.html strand</p>
<div v-html="htmlstr">
</div>
<hr />
<p>3.attribute</p>
<a v-bind:href="hrefstr">use Baidu Search</a>
<input :value="valuestr"/>
<hr />
<p>4.expression Vue Provides complete JavaScript Expression support</p>
<p>4.1 vue Contains built-in functions/p>
{{str.substring(0,4).toUpperCase()}}
<p>4.2vue Can support operations</p>
Zhang San:{{number+1}}
<p>4.3vue Support ternary operation</p>
{{ok ? 'yes':'no'}}
<p>4.4vue Support string splicing</p>
<span :id="'id_'+id">
</span>
</div>
<script type="text/javascript">
//Binding boundary
new Vue({
el: '#app',
data() {
return {
msg: 'vue Preliminary use',
htmlstr: '<h3 style="color:red">This is a html fragment</h3>',
hrefstr: 'http://www.baidu.com',
valuestr:'2223 ',
str:'java It's the best language',
number:59,
ok:true,
id:19
}
}
})
</script>
</body>
</html>Operation results:
2, Instruction
Refers to special attributes prefixed with "v -"
1. V-if|v-else|v-else-if (branch syntax):
Code: define an achievement in data. If it exceeds 80 points, it is excellent, if it exceeds 60 points, it is good, and if it is below 60 points, it is poor.
Define an input binding score data (v-model):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p> v-if|v-else|v-else-if</p>
fraction:<input v-model="score" />
<div v-if="score>80">excellent</div>
<div v-else-if="score>60">good</div>
<div v-else="score<60">Keep going</div>
</div>
</body>
<script type="text/javascript">
<!-- Binding boundary -->
new Vue({
el:'#app',
data() {
return {
score:66
};
}
})
</script>
</html>Operation results (excellent or poor performance is judged according to the number entered by the user in the input box):
2. v-show: define an input box. The same condition is score > 90. When the score in the input box is greater than 90, the "top excellent employment list" will be displayed. If it is less than 90, it will not be displayed
<p>2.v-show</p
<p>2.1v-show And v-if Differences between</p>
<div v-show="score>90">v-show-List of outstanding students</div>
<div v-if="score>90">v-if-List of outstanding students</div>Operation results:
When the score is greater than 90:
When the score is less than 90, the "top excellent employment list" will not be displayed
Above illustration You can also explain the difference between v-if and v-show:
v-if doesn't even have div code, but v-show just hides display
v-show: similar to v-if, it only renders elements with false expression behind them, and adds css generation to such elements Code: style="display:none"
3. v-for: JS like traversal
Traverse the array: v-for="item in items", items is the array, and item is the array element in the array
Traversal object: v-for="(value,key,index) in stu", value attribute value, key attribute name, index subscript
Drop down box: hobbySelected the selected option - echo, and the drop-down box can be selected according to the information filled in the following input box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p>v-for</p>
<select v-model="hobbySelected">
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<input v-model="hobbySelected" />
</div>
</body>
<script type="text/javascript">
<!-- Binding boundary -->
new Vue({
el:'#app',
data() {
return {
hobby:[
{id:"1",name:"wash hair"},
{id:"2",name:"Bath"},
{id:"3",name:"wash one 's feet"}
],
hobbySelected:3
};
}
})
</script>
</html>Run results are as follows:
4. v-for check box:
code:
<p>3.v-for check box</p>
<div v-for="h in hobby">
<input v-bind:value="h.id" type=checkbox >{{h.name}}
</div>
The operation is as follows:
5. V-on (abbreviation @ click="handle")
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p>4.v-on</p>
<button type="button" v-on:click="handle">Trigger event</button>
<p>4.v-on (abbreviation@click="handle") </p>
<button type="button" @click="handle">Trigger event 222</button>
</div>
</body>
<script type="text/javascript">
<!-- Binding boundary -->
new Vue({
el:'#app',
data() {
return {
score:78,
hobby:[
{id:"1",name:"wash hair"},
{id:"2",name:"Bath"},
{id:"3",name:"wash one 's feet"}
],
hobbySelected:3
};
},
methods:{
handle(){
alert("Trigger event");
}
}
})
</script>
</html>
The operation is as follows:
3, Dynamic parameters
1. Definition: dynamic parameters refer to dynamic parameters that can be realized by v-on: [defining an attribute] and then passing values in data (dynamic parameter expression has some syntax constraints, evname is invalid, evname is valid, and uppercase is avoided)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p>3.dynamic parameter </p>
<button v-on:[evname]="handle">dynamic parameter </button>
</div>
</body>
<script type="text/javascript">
<!-- Binding boundary -->
new Vue({
el:'#app',
data() {
return {
// evname:'click'
evname:'dblclick'
};
},
methods:{
handle(){
alert("Trigger event");
}
}
})
</script>
</html>
Running result: the event is triggered after two clicks, because evname is delclick.
4, Filter
Introduction: filtering is divided into local filtering and global filtering. This concept is like global variables and local variables.
1. Global filter
Vue.filter('filterName', function (value) {
// value indicates the content to be filtered
});
2. Local filter
new Vue({
filters:{'filterName':function(value){}}
});
3. Tandem
4. The filter can pass parameters
Code: (note that the value here refers to the text to be filtered, taking the head instead of the tail)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -- >
<div id="app">
{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
</div>
</body>
<script type="text/javascript">
// Global filter
Vue.filter('all', function (value) {
return value.substring(2,6);
});
<!-- Binding boundary -- >
new Vue({
el:'#app',
data() {
return {
msg:"java is the best"
};
},
// Local filtering
filters:{
'single':function(val){
return val.substring(2,3);
},
'param':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</html>
5, Calculation properties & listening properties
1. Properties are divided into calculation properties and listening properties. Calculation properties can be used to quickly calculate the properties displayed in the View. These calculations will be cached and updated only when necessary. Keyword: calculated: {} and the listening attribute can respond to data changes through watch. Keyword: watch:{}
2. Calculation properties:
I will use a shopping cart example to explain the calculation attributes: create a table in the boundary, define the quantity of each item in the data, and the data in the data is dynamic data, that is, one data will change with the change of another data
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p>Calculation properties</p>
<table border="1" style="width: 600px;height: 300px;">
<tr>
<td>Hat</td>
<td>30</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maoziTotal}}
</td>
</tr>
<tr>
<td>shoes</td>
<td>28</td>
<td>
<input v-model="xiezi" />
</td>
<td>
{{xieziTotal}}
</td>
</tr>
<tr>
<td>trousers</td>
<td>12</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{{kuziTotal}}
</td>
</tr>
<tr>
<td>Total price</td>
<td colspan="3">{{total}}</td>
</tr>
</table>
<p>Listening properties</p>
Kilometer:<input v-model="km" />
rice:<input v-model="m" />
</div>
</body>
<script type="text/javascript">
<!-- Binding boundary -->
new Vue({
el:'#app',
data() {
return {
maozi:1,
xiezi:1,
kuzi:1,
km:2,
m:2000
};
},
methods:{
handle(){
alert("Trigger event");
}
},
// Calculation properties
computed:{
maoziTotal(){
return this.maozi*30;
},
xieziTotal(){
return this.xiezi*28;
},
kuziTotal(){
return this.kuzi*12;
},
total(){
return this.maoziTotal+this.xieziTotal+this.kuziTotal;
}
},
// Listening properties
watch:{
// v refers to the m variable
m(v){
this.km=parseInt(v)/1000
},
// v is the km variable
km(v){
this.m=parseInt(v)*1000
}
}
})
</script>
</html>The operation is as follows:
3. Listening properties:
Explain this knowledge point with the conversion of km and m:
<p>Listening properties</p>
Km:<input v-model="km" />
Meter:<input v-model="m"/>
<script type="text/javascript">
watch:{
new Vue({
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
})
</script>Note: km:function(v){
this.m=parseInt(v)*1000;
}, This code means that v is a parameter. catch is used to listen to km, and then divide the value of km by 1000 and assign it to m. The M function is the same
Operation results:
4. Difference between listening attribute and calculating attribute:
1. Calculated properties are not used in variables, but in vue boundaries
<input v-model="maozi" />
2. Listening attributes are defined in variables, and the variables of listening attributes affect each other
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
End of current period~