Vue基础-第二篇

reduce方法的使用

利用reduce方法遍历数组的每一个元素，reduce()调用结果最后返回一个最终值（最后一次return值）

        var arr = [
       {name: 'Vuejs入门', price: 99, count: 3},
       {name: 'Vuejs底层', price: 89, count: 1},
       {name: 'Vuejs从入门到放弃', price: 19, count: 5},
       ]

    //数组名.reduce(回调函数，pre的初始值)
    arr.reduce(function(pre, current){
        // reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码
        // current表示当前正在遍历的这个元素
        // pre 是上一次的这个函数return的值
        // ！！！因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值
        console.log(pre, current)
        return 10
    },0)

	//！！！并且reduce方法最终会返回最后一次的return值

需求：计算上面购物车的总价（每一个 price*count 的和）

	//reduce方法最终会返回最后一次的return值
    var a = arr.reduce(function(pre, current){

        console.log(pre, current)

        // var total = 当前这次的 price*count + 上一次的total
        var total = current.price*current.count + pre
        return total
    },0)

    alert(a)   //这个a就是上面购物车的总价

备注：上面这个reduce()方法和Vue本身没有关系，纯粹是一个js数组的方法。

(重点)Vue的计算属性computed 的使用

跟上面的案例一样
什么时候用计算属性：一个值如果受其他值的影响，随着他的变化而发生改变，那这个值就可以做成计算属性。

    <div id="app">
        {{total}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr: [
                    {name: 'Vuejs入门', price: 99, count: 3},
                    {name: 'Vuejs底层', price: 89, count: 1},
                    {name: 'Vuejs从入门到放弃', price: 19, count: 5},
                ]    
            },
            computed:{
                //computed里面的方法必须有返回值！这个return值将来在视图中被{{total}}引用
                total(){
                    var a = this.arr.reduce(function(pre, current){

                        console.log(pre, current)

                        // var total = 当前这次的 price*count + 上一次的total
                        var total = current.price*current.count + pre
                        return total
                    },0)
                    return a
                }
            }

        })
    </script>

其实计算属性有缓存的效果，第一次使用的时候计算属性的值就会被缓存起来， 被其他值影响的(其他值发生变化)时候，才会再次执行 计算属性的函数；
而普通方法调用1次就执行1次，性能效率低下。

    <div id='app'>
        <p>总价为： {{ compTotal }}</p>
        <p>总价为： {{ compTotal }}</p>
        <p>总价为： {{ compTotal }}</p>
        <p>总价为： {{ compTotal }}</p>
        <p>总价为： {{ compTotal }}</p>
        <p>methods中的总价为： {{ methTotal() }}</p>
        <p>methods中的总价为： {{ methTotal() }}</p>
        <p>methods中的总价为： {{ methTotal() }}</p>
        <p>methods中的总价为： {{ methTotal() }}</p>
        <p>methods中的总价为： {{ methTotal() }}</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                arr: [
                    {name: 'Vuejs入门', price: 99, count: 3},
                    {name: 'Vuejs底层', price: 89, count: 1},
                    {name: 'Vuejs从入门到放弃', price: 19, count: 5},
                ]
            },
            computed:{
                //computed里面的方法必须有返回值！这个return值将来在视图中被{{compTotal}}引用
                compTotal(){
                    console.log("执行了compTotal");
                    let ret = this.arr.reduce((pre,cur)=>{
                        return cur.price*cur.count + pre
                    },0)
                    return "¥"+ret.toFixed(2)+"元"
                }
            },
            methods:{
                methTotal(){
                    console.log("执行了methTotal");
                    let ret = this.arr.reduce((pre,cur)=>{
                        return cur.price*cur.count + pre
                    },0)
                    return "¥"+ret.toFixed(2)+"元"
                }
            }
        })

computed内部方法的另一种写法(知道有get和 set的格式)

            computed:{
                total:{
                    get(){
                        // 获取total的是执行，并缓存这个值， 往后就是arr里面的值发生改变才来执行
                        // get 就相当于刚才写的函数
                        let ret = this.arr.reduce((pre,cur)=>{
                            return cur.price * cur.count + pre
                        },0)
                        return "¥"+ret.toFixed(2)+"元"
                    },
                    set(newValue){  //newValue 用来接收等号后面这个新的值
                        // total的值被修改的时候执行
                        console.log("执行了set方法",newValue);
                    }
                }
            }
            
             vm.total = 11   // 触发set方法的执行

使用:value和@input代替v-model

v-model 可以用 value属性，input事件来替换
v-model 是vue提供给我们的一个语法糖

    <div id='app'>
        <!-- 在用户输入的时候，修改txtVal，修改成用户输入的值 -->
        <input type="text" :value="txtVal" @input="handleInput">
        <p>{{txtVal}}</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                txtVal:"默认值"
            },
            methods:{
                handleInput(e){
                    // 用户输入的时候，就来执行，输入一个字符就触发1次
                    console.log("触发了input事件",e.target.value);
                    // 修改txtVal
                    // this.txtVal = 用户输入的信息
                    this.txtVal = e.target.value
                }
            }
        })