Vue.js-计算属性和过滤器与监听属性/Vue.js组件
1、什么是计算属性
在Vue. js构造函数中定义数据使用data,该对象是对数据的代理，是一个键值对， 并且实时与页面的表现是一致的，但在这个对象中只能是简单的键值对，不能拥有业务逻辑。由于 “data”中的属性属于同-一个生命周期，所以如果需要某一个属性是依赖于另外一个属性时，在‘data”属性中是做不到的。为了解决这个问题，Vue提供计算属性来实现。
在Vue.js构造函数的参数对象中有一个“computed"，该对象就是用于定义计算属性的，该对象中的 “键”也就是计算属性。与“data” 不同的是，计算属性的键值是一个拥有 返回值的函数，该函数中可以访问dat中的所有属性。
在一个计算属性中可以完成各种复杂的逻辑，包括逻辑运算、函数调用等，只要最终返回 一个结果即可。计算属性可以依赖多个Vue实例的数据，只要其中有一 个数据变化，计算属就会重新执行，视图也会更新。
computed:{
prices:function(){
var prices=0;
for(var i=0;i<this.package1.length;i++){
prices+=this.package1[i].price * this.package1[i].count;
}
return prices;
}
}
2、计算属性与计算方法的区别
computed:{
areas:function(){
let areas=0
areas = this.length * this.width
return areas
}
},
methods:{
add:function(){
this.num=parseInt(this.length)+parseInt(this.width)
},
}
在computed的方法中编写的逻辑运算，在调用时直接将areas视为一个变量值使用， 无须 进行函数调用。computed具有级存功能，在系统初始运行的时候调用一次， 当计算结果发生变化时会再次被调用。例在上面代码中computed中的方法就会被调用。computed是计算属性，调用时“areas"不需要括号。
在methods的方法中编写的逻辑运算，在调用时一-定要加括号，例如add()。methods中可 以写多个方法，并且这些方法在页面初始加载时调用一次， 以后只有使用程序代码调用时才会 被执行。例在上面代码中单击按钮后，methods中的单击事件方法才被调用一次。
其实调用methods中的方法也能实现和计算属性一样的效果，甚至有的方法还能接收参数，使用起来更加灵活。既然使用计算方法就可以实现。
那为什么还需要计算属性呢?这是因为计算属性是基于依赖缓存的，计算属性依赖的数据发生变化时，才会重新取值，所以依赖的text只要不改变，计算属性就不更新。计算方法则不同，只要重新渲染就会被调用，因此函数也会被执行。
使用计算属性还是计算方法取决于是否需要缓存，如果做遍历大数组和做大量计算时，应当使用计算属性。
3、计算属性的setter
每一个计算属性都包含一个getter和setter。
computed:{
fullName:{
get:function(){
return this.firstName+ ' ' +this.lastName
},
set:function(){
var name = newValue.split(' ');
this.firstName=names[0];
this.lastName=names[1];
}
}
}
4、过滤器的定义
过滤器( Filters)提供了- -种执行文本转换的方法，例如所有字母都转换成大写字母或者 做任何想做的事情。过滤器与计算属性( computed)、方法( methods )不同的是，过滤器不会修改数据，只是改变在网页上的显示形式。
过滤器可以用在两个地方:插值表达式{ }}和v-bind表达式，然后由管道操作符“|”进行指示，其语法格式如下:
{{ message| 过滤器名}}
<!--在v-bind中调用过滤器-->
<div v-bind:id="rawIdI 过滤器名"></div>
（1）、本地过滤器
filters:{
changeCapitalLetter(value){
if(value){
let str=value.toString();
let newArr=str.split(" ").map(ele=>{
return ele.charAt(0).toUpperCase()+ele.slice(1)
});
return newArr.join(" ")
}
}
}
（2）、全局过滤器
Vue.filter('number',function(value){
return value <10?'0'+value:value
})
Vue.filter('numberFormat',function(value,n){
return value.toFixed(n)
})
var app=new Vue({
el:"#app",
data:{
message:'Hello Vue!'
},
})
5、监听属性
监听属性watch用来监听指定属性的变化，watch这 个对象中都是函数，函数的名称是data中的属性名称，watch中的函数不需要调用。属性发生改变时就会触发watch函数，每个函数都会接收两个值，分别是新值和旧日值，可以在watch中根据新旧值的判断来减少虚拟DOM的渲染。
watch:{
监听的属性名（新值，旧值）{
}
}
Vue.js组件的创建
使用Vue.extend配合Vue.component方法
var com1 = Vue.extend{
template:"<h3>使用Vue.extend创建组件</h3>"
})
例如：
var com1=Vue.extend({
template:"<h3>使用vue.extend创建组件</h3>"
})
Vue.component('mycom',com1)
var vm = new Vue({
el:"#app",
data:{
},
});
