大前端时代 当原生APP碰上Vue2.0（续）

在上篇开篇中描述了接触Vue2.0的背景以及在文末提到了Vue的几大特点，今天本文将主要围绕. 组件化&&MVVM 这2个特点用购物车页面来论证。至于易上手，你看完成这项目的实际工期就懂了QAQ，下面进入正题。
先看下效果图，可看到图中有很多方块，颜色相同的表示同一种component（组件）,单选按钮另外算一种，表示颜色不够 = =！

购物车.png
由上图看出一个总的页面下（看成最外层的组件），有子组件，而子组件下还有子组件，这和iOS的 不正是同个道理吗？

  //...
 [B addSubView C];
 [A addSubView B];

然后再来看下代码架构

购物车代码文件架构.png

简单贴下蓝色框组件的代码吧

<template>
    <div style="display: flex;flex-direction: row;height: 110px;margin-bottom: 1px;background-color: white;">
        <!--左 选中按钮-->
        <div style="width: 30px;" v-on:click="single">
            <y-icon style="line-height: 100px;" v-model="checked" :type="showCancel"></y-icon>
        </div>

        <!--中  商品图片-->
        <div style="width: 100px; " v-on:click="myFun">
            <img style="width: 80px;height: 80px;margin-top :15px;margin-left: 10px;"
                 :src="cellItem.productImage">
        </div>
        <!--右-->
        <div style="display: flex;flex-direction: column;flex: 1;">
            <!-- 上 标题-->
            <div style="margin-right: 6px;font-size: 14px;color: #333333;margin-top: 15px;height: 40px;"
                 v-on:click="myFun">{{cellItem.name}}
            </div>
            <!--下  价格+加减-->
            <div style="display: flex;flex-direction: row;flex: 1;">
                <div  style="color: #f03838;margin-top: 17px;" v-on:click="myFun">￥{{cellItem.displayPrice}}</div>
                <add_sub v-show="typedId !=-1" v-model="cellItem.number" style="margin-right: 8px;flex: 1;"
                         @on-add="on_add" @on-sub="on_sub"></add_sub>
            </div>
        </div>
    </div>
</template>

<script>
    import Lib from 'assets/js/Lib';
    import add_sub  from './addsub.vue'; //加减号组件
    import YIcon from '../../../../components/YIcon.vue';//单选组件
    export default {
        components: {
            add_sub,
            YIcon
        },
        data () {
            return {}
        },
        computed: {
            checked(){
                return this.cellItem.isSelected == 1
            },
            showCancel(){
                if (this.cellItem.stockState == 2 || this.cellItem.stockState == 3) {
                    return "cancel";
                } else {
                    return 'default'
                }
            }
        },
        props: {
            cellItem: Object,
            typedId: Number
        },
        created(){


        },
        methods: {

            single: function () {
                if (this.cellItem.stockState == 2 || this.cellItem.stockState == 3) {
                    Lib.Hub.$emit('deleteSingle', this.cellItem);
                } else {
                    Lib.Hub.$emit('selectSingle', this.cellItem);
                }

            },
            myFun: function () {
                Lib.Hub.$emit('goDetail', this.cellItem); //Hub触发事件
            },
            on_add: function () {
                console.log("on_add")
                Lib.Hub.$emit('add', this.cellItem); //Hub触发事件
            },
            on_sub: function () {
                console.log("on_sub")
                Lib.Hub.$emit('sub', this.cellItem); //Hub触发事件
            }

        }
    }
</script>
<style scoped>

</style>

好了 关于这边的东西也实在没啥好写的，俗话说语言都是相通的，学好一门的话其它语言也蛮快的 ，只是要的东西或者编程思想用不同语言不同语法表达出来而已，意识流操作哈哈哈。
以上！