catalogue
4, Calculation properties and listening properties
1, Interpolation<!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>text</p> <h3>{}</h3> <p>html strand</p> <div v-html="htmlstr"></div> <p>vue Properties in</p> <!-- All native attributes should be used vue Variables need to be added before the corresponding attributes v-bind --> <a v-bind:href="hrefstr">Baidu</a> <input :value="valuestr"/> <p>expression</p> {}<hr /> Xiao Hei{}<hr /> {}<hr /> <span :id="'id_'+id">xx</span> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { msg: 'Little white is not white', htmlstr:'<h3 style="color:red;">This is a html fragment</h3>', hrefstr:'https://www.baidu.com', valuestr:'224', str:'Xiaobai is not Xiaohei', number:59, ok:true, id:123 } } }) </script> </html>
1. Text
{}
<!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>text</p> <h3>{}</h3> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { msg: 'Little white is not white', } } }) </script> </html>
Operation results:
2,html
Use the v-html instruction to output HTML 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>html strand</p> <div v-html="htmlstr"></div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { htmlstr:'<h3 style="color:red;">This is a html fragment</h3>', } } }) </script> </html>
Operation results;
3. Attributes
The value in the HTML attribute should use the v-bind instruction
<!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>vue Properties in</p> <!-- All native attributes should be used vue Variables need to be added before the corresponding attributes v-bind --> <a v-bind:href="hrefstr">Baidu</a> <input :value="valuestr"/> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { hrefstr:'https://www.baidu.com', valuestr:'224' } } }) </script> </html>
Operation results:
4. Expression
Vue provides full JavaScript expression support
<!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>expression</p> {}<hr /> Xiao Hei{}<hr /> {}<hr /> <span :id="'id_'+id">xx</span> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { str:'Xiaobai is not Xiaohei', number:59, ok:true, id:123 } } }) </script> </html>
Operation results:
Refers to special attributes prefixed with "v -"
1. Core instruction
①,v-if|v-else|v-else-if
v-if|v-else|v-else-if: judge whether to render the element according to the bool value of the subsequent expression
They can only be brothers
The previous sibling element of v-else-if must be v-if
The last sibling element of v-else must be v-if or v-else-if
Case: score judgment
<!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">More efforts are needed</div> </div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { score: 78, }, }) </script> </html>
Operation results:
②, v-show
<!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">More efforts are needed</div> <p>v-show</p> <div v-show="score>90"> v-show-Excellent students</div> <div v-if="score>90"> v-if-Excellent students</div> </div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { score: 78, } }) </script> </html>
Operation results:
Differences between v-show and v-if:
Both v-show and v-if appear when they meet the judgment conditions. If they do not meet the judgment conditions, v-show is hidden and v-if disappears directly
③,v-for
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
!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="hobbySelect"> <option v-for="h in hobby" :value="h.id">{}</option> </select> <input v-model="hobbySelect" /> </div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { hobby: [{ id: "1", name: "handsome guy" }, { id: "2", name: "game" }, { id: "3", name: "beauty" }, ], hobbySelect:3 }; } }) </script> </html>
Operation results:
CheckBox
<!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="hobbySelect"> <option v-for="h in hobby" :value="h.id">{}</option> </select> <div v-for="h in hobby"> <input :value="h.id" type="checkbox"/>{} </div> </div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', data() { return { score: 78, hobby: [{ id: "1", name: "handsome guy" }, { id: "2", name: "game" }, { id: "3", name: "beauty" }, ], hobbySelect:3 }; }, }) </script> </html>
Operation results:
④,v-on
v-on abbreviation:@
<!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-on</p> <button v-on:click="handel">Trigger event</button> <button @click="handel">Trigger event 2</button> </div> </body> <script type="text/javascript"> // Binding boundary ES6 specific performance new Vue({ el: '#app', methods:{ handel(){ alert("Trigger event") } } }) </script> </html>
Operation results:
2. Dynamic parameters
Dynamic parameter expressions have 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>dynamic parameter </p> <button v-on:[evname]="handel">dynamic parameter </button> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { return { evname:'click' //Click twice to trigger //evname:'dblclick' }; }, methods:{ handel(){ alert("Trigger event") } } }) </script> </html>
Operation results;
1. Global filter
Vue.filter('filterName', function (value) {
// value Indicates what to filter
});
<!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"> {}<hr /> </div> </body> <script type="text/javascript"> //Global filter Vue.filter('all', function(value) { // value indicates the content to be filtered return value.substring(0,3) }); new Vue({ el: '#app', data() { return { msg: "Xiaobai is not Xiaohei" }; } }) </script> </html>
Operation results:
2. Local filter
Local filter
new Vue({
filters:{'filterName':function(value){}}
});
<!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>Local filter</p> {}<hr /> <p>Filter series </p> {}<hr /> <p>Filter belt parameters:</p> {} </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { return { msg: "Xiaobai is not Xiaohei" }; }, filters:{ 'single':function(val){ return val.substring(2,3) }, 'param':function(val,star,end){ return val.substring(star,end) } } }) </script> </html>
② Filter serial connection
{}
③ With parameters
{}
'param':function(val,star,end){
return val.substring(star,end)
}
Operation results:
4, Calculation properties and listening properties
1. Calculation properties
Computed is used to monitor the variables defined by itself. The variables are not declared in data, but directly defined in computed. Then, two-way data binding can be carried out on the page to display the results or used for other processing
<!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: 600;height: 300px;"> <tr> <td>clothes</td> <td>100</td> <td> <input v-model="yifu" /> </td> <td> {} </td> </tr> <tr> <td>book</td> <td>30</td> <td> <input v-model="book" /> </td> <td> {} </td> </tr> <tr> <td>shoes</td> <td>70</td> <td> <input v-model="xiezi" /> </td> <td> {} </td> </tr> <tr> <td>Total price</td> <td colspan="3">{}</td> </tr> </table> </div> </body> <script type="text/javascript"> //Global filter Vue.filter('all', function(value) { // value indicates the content to be filtered return value.substring(0,3) }); new Vue({ el: '#app', data() { return { yifu: 1, book:1, xiezi:1, km:2, m:2000 }; }, computed:{ yifuTotal(){ return this.yifu*100 }, bookTotal(){ return this.book*30 }, xieziTotal(){ return this.xiezi*70 }, total(){ return this.yifuTotal+this.bookTotal+this.xieziTotal } }, }) </script> </html>
Operation results:
2. Listening properties
watch is mainly used to monitor the changes of vue instances. Of course, the variables it monitors must be declared in data. It can monitor a variable or an object
<!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>Listening properties</p> Km:<input v-model="km"/> Meter:<input v-model="m"/> </div> </body> <script type="text/javascript"> //Global filter Vue.filter('all', function(value) { // value indicates the content to be filtered return value.substring(0,3) }); new Vue({ el: '#app', data() { return { km:2, m:2000 }; }, methods: { handel() { alert("Trigger event") } }, watch:{ m:function (v){ this.km= parseInt(v)/1000; }, km:function (v){ this.m= parseInt(v)*1000; } } }) </script> </html>
Operation results:
