vueDay03(过滤器、计算属性、属性监听器)

过滤器

过滤器只能在属性绑定、插值表达式中 不用在v-html ,v-text中,对绑定数据进行处理 可以用this取值data
语法 绑定数据名|函数名(参数)|函数名(参数)
如:<div>{{data|fn1(可以不传参)}}</div>
如:
描述:过滤时data作为参数传给fn1 fn1返回的数据会显示到页面上 如果有多次调用就会把函数的返回值作为参数传给下一个函数 直到最后显示到页面上;

<div id="box">
        <h1>{{money|fn}}</h1>
        <h1>{{money|fn2('元','你好')}}</h1>
        <!-- 连续过滤 -->
        <h1>{{money|fn2('元')|fn3('参数')}}</h1>
        <!-- 属性绑定 -->
        <h1 :class='box|fn4'></h1>
    </div>
    <script>
        new Vue({
            el: '#box',
            data: {
                money: 196.1520,
                box: 'box'
            },
            filters: {
                fn(arg) {
                    return arg.toFixed(2) * 100 / 100;
                },
                fn2(arg, arg2) {
                    return arg.toFixed(2) * 100 / 100 + arg2;
                },
                fn3(arg, arg2) {
                    return arg + arg2;
                },
                fn4(arg) {
                    return arg + 1;
                }
            }
        })
    </script>

计算属性

语法:{{属性名}}
如:<button>结算:总价{{total}}</button>
调用方法: computed: {方法};
对实例对象中的数据处理 通过this获取值;

<div id="box">
        <h1 v-for='el in arr'>{{el.data}}</h1>
        <!-- 属性绑定 -->
        <input :value='fn'></input>
        <!-- 插值运算符 -->
        <button>{{fn2}}</button>
    </div>
    <script>
        new Vue({
            el: '#box',
            data: {
                arr: [
                    { data: 10 },
                    { data: 10 },
                    { data: 10 },
                ],
            },
            // 计算属性
            computed: {
                fn() {
                    let totle = this.arr.reduce((e1, e2) => {
                        return e1 + e2.data;
                    }, 0);
                    return totle;
                },
                fn2() {
                    let totle = this.arr.reduce((e1, e2) => {
                        return e1 + e2.data;
                    }, 0);
                    return totle
                }
                //第二种方式
                 fn3: {
                    get() {
                        return
                    },
                    set() {
                        // 代码
                    }
                }
            }
        })
 </script>

计算属性与方法

对于方法 页面用到的数据改变会调用methods用的全部方法.;
对于计算属性 只有相应数据改变才会调用相应方法 而不会调用其他方法

属性监听

//数据改变就调用相应的监听函数;
语法: data{msg,msg2} 
     watch:{
		//必须与data中绑定的数据同名
		msg2(){
			
		}
       //深度监听 对于数组中的数据没有劫持的数据 数据改变时不会调用监听函数 不过深度监听就可以
		msg:{
			deep: true,
			handler: () => {
			console.log(1111)
			}
		}
   }

DATA中的数组数据改变

在实例化对象时不会对数组中的数据进行劫持，所以改变数组中的数据时不会重新渲染页面；而对象中的数据是劫持过的；所以改变数据会重新渲染页面	;、
解决方案：Vue.set(this.arr,0,200);
        1.数组全量替换 this.arr = newArr; 
		2.自定义数组深拷贝函数:
			 function (obj) {
						if (obj === null) return null
						if (typeof obj !== 'object') return obj;
						if (obj.constructor === Date) return new Date(obj);
						if (obj.constructor === RegExp) return new RegExp(obj);
						var newObj = new obj.constructor();  //保持继承链
						for (var key in obj) {
							if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
								var val = obj[key];
								newObj[key] = typeof val === 'object' ? 										arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
							}
						}
						return newObj;
					}	
	3.JSON转换 普通数组
	let newA JSON.parse(JSON.stringify(arr))