Table of contents
2. Computer Computed Properties
foreword
We know that every Vue project application creates a new Vue project through the Vue constructor. The configuration object for creating a vue instance can include the following attribute options, such as data, methods, watch, template, etc. Each option has different functions, and you can choose different configurations according to your own needs.
1. methods
The function called by the general event will be defined in the attributes of the methods function. The function defined in the methods attribute can also be called a method, which is generally used as the callback function of the event. This is called several times and can be executed several times.
We can better understand our example through the example code:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
price:0,
count:1,
total:0,
},
methods:{
sum(){
this.total = this.price*this.count;
}
}
})
</script>
</body>
</html>operation result:
We can see that when the quantity and price change, we need to recalculate the total money. At this time, we need to monitor the changes in price and quantity, so that the total price can be calculated; because the attributes are already defined in methods The calculation method of sum and the calculation formula of sum are called when the two leave triggers of change and keyup are called. The data will be changed, so that the code executes the calculation method in the sum.
2. Computer Computed Properties
Why is there this computed property? Because in vue, in order to simplify the logic, when a value is too dependent on other attribute values, vue will provide computed properties for code use. This computed property is suitable for executing complex expressions that are often long and tedious to reuse.
You can write computed properties directly and call computed properties in the same way as other properties.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
price:0,
count:1,
},
computed:{
total:function(){
return this.price*this.count
}
}
})
</script>
</body>
</html>operation result:
The return result of the function of the computed property can be directly assigned to the computed property name. The computed property can be recomputed only when the dependent data changes. If the dependent data does not change, the result of the first computation will be cached. used directly.
Three, watch
Watch can be used to monitor changes in data object properties or computed properties. It is used to listen for changes in data. When data changes, it can process some transactions.
The value of watch is an object, the property of the object is the property to be monitored, the expression to be observed, and its value is the value of a callback, method name or object.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" >元/斤</br>
数量：<input type="number " v-model="count" >斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
price:0,
count:1,
total:0,
},
watch:{
"price":function(newVal,oldVal){
return this.data=newVal*this.count;
},
"count":function(newVal,oldVal){
return this.total = this.price*newVal;
}
}
})
</script>
</body>
</html>operation result:
The listening process is: when calling watch, each property of the object inside, when the value of a monitored property changes, the callback function that triggers this property will be executed.
When totals depend on price and quantity, when price and quantity change, totals also change. Listen to the price and quantity, and sum the changes. Difference between listening and computed properties: Computed properties save the result, but listening does not.
Four, filter
This filter is called a filter in vue, which can filter data before outputting results, and can be used for some common text formatting. Filter: A convenient method for data processing within a template, suitable for setting display formats such as strings, numbers, numbers, etc.
Filter syntax: vue.filter('filter name', function (parameter) {function body}), the filter is only called in the difference and v-bind expressions, and is added at the end of the expression, using "|" to separate. Simple code to explain:
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<h1>{
{sum|f_int}}</h1>
<h1>{
{sum|f_int|f_$('$')}}</h1>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.filter('f_int',function(msg){
return Math.round(msg);
})
Vue.filter('f_$',function(msg,arg1){
return arg1+msg;
})
var app = new Vue({
el:'#app',
data:{
sum:86
},
})
</script>
</body>
</html>operation result:
