Vue基础学习之慕课网购物车

                                  Vue基础学习之慕课网购物车

 

前言:

           学习版本2.x, 先对着官方文档粗略得撸了一遍,一知半解,然后在慕课网看了下vue基础视频,购物车页面简单应用,https://www.imooc.com/video/14077/0,

                总结下知识点:

                     1. mounted钩子函数: html挂载后的事件,一般执行ajax;

                     2. axios.js : 视频中用的vue-resource,2.0以后官方支持axios.js,并不对vue-resouce进行维护,本着用新不用旧得原则,我改用了axios.js,  遵循es6 promise编写,挺方便,

                     3. fliter过滤: 分为全局过滤与局部过滤 ,都是返回一个值,然后用这个值代替dom中得值,可以有多个参数

全局过滤:

Vue.filter('money', (value, type) => {
    return value.toFixed(2) + type;
})

局部过滤

filters: {
        formatMoney: (value) => {
            return "￥" + value.toFixed(2);
        }
    },

html:

 <div class="item-price">{{item.productPrice | money('元')}}</div>

                    4 v-for循环: 遍历,主要知识点就是如何过滤数组,

        fliterAdList: function () {
            console.log(this.sliceNumber);
            return this.addressList.slice(0, this.sliceNumber);
        }

   视频中主要讲了 vue1跟vue2得差异,vue2不支持limit 改为 原生js能实现 如果那么vue就不再实现了, 瘦身,

                    5 v-bind v-on v-model : 具体如何使用,一些解决问题得思路

 

github地址(带未更改源文件): https://github.com/a578024797/vue_shopCart.git