vue教程(二)--过滤器和监视改动功能

过滤器filter:

1、将数据进行添油加醋的操作。

2、过滤器分两种： 组件内的过滤器（组件内有效）、 全局过滤器

组件内：filters:{过滤器名：过滤器函数fn}，fn内通过return 返回最终数据。 例如 filters:{transName:function(){reteurn ''}}

全局过滤器： Vue.filter(过滤器名：过滤器函数fn)；例如：Vue.filter('transName',function(arg....){return ''})

3、过滤器是先注册再使用

4、用法 {{变量|过滤器名(参数1，参数2......)}}

 

监听watch(单个)，cumputed(监听多个)

1、用法watch(key属于data中声明的变量名，value是监视后的行为)

watch:{

　　myName:function(newValue,oldValue){

　　}

}

注：如果watch监视复杂类型的数据 比如users:[{name:''abc}],  如果按上述监听，怎么监听失败，因为对于复杂类型的数据，watch监听的是对象的地址，而不是属性的值。所以需要

深度监听。一般复杂类型 Object || array,用法如下：

watch:{

　　deep:true,

　　handler:function(newValue,oldValue){

　　}

}

2、cumputed(监听多个) 用法

例如 要实现   a+b = {{result}}的例子，a、b分别代表的是data里面声明的变量，a\b任何一个的变化都会影响result的输出,这时可以使用cumputed,

cumputed:{

　　//监听result属性

　　result:function(){

　　　　//监视对象，凡是写在该方法内的所有this.变量，都会被监听执行该方法。

　　　　return this.a+this.b;

　　}

}

 

注：git上有开发的项目作为例子，有兴趣的可以下载学习。源代码已上传git：Git地址，QQ交流群

                                                                                                                                           ①群：699050440

                                                                                                                                           ②群：824313640