在上篇開篇中描述了接觸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觸發(fā)事件
},
on_add: function () {
console.log("on_add")
Lib.Hub.$emit('add', this.cellItem); //Hub觸發(fā)事件
},
on_sub: function () {
console.log("on_sub")
Lib.Hub.$emit('sub', this.cellItem); //Hub觸發(fā)事件
}
}
}
</script>
<style scoped>
</style>
好了 關于這邊的東西也實在沒啥好寫的步氏，俗話說語言都是相通的，學好一門的話其它語言也蠻快的 徒爹，只是要的東西或者編程思想用不同語言不同語法表達出來而已荚醒，意識流操作哈哈哈。
以上隆嗅！
