实战篇：利用计算属性、指令等知识开发购物车（基础篇）

        前5章内容基本涵盖了Vue.js最核心和最常用的知识点，掌握这些内容已经可以上手开发一些小功能了。本节则以Vue.js的计算属性、内置指令、方法等内容为基础，完成一个在业务中具有代表性的小功能：购物车。

       在开始写代码前，要对需求进行分析,这样有利于我们理清业务逻辑尽可能还原设计与产品交互。

        购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加和减少，每类商品还可以从购物车中移除。

        在明确需求后，我们就可以开始编程了，因为业务代码较多，我们将HTML、CSS、JavaScript分离为三个文件，便于阅读和维护：

⚪ index.html(引入资源及模板)

⚪index.js(Vue实例及业务代码）

⚪styele.css（样式）

现在index.html中引入Vue.js和相关资源，创建一个根元素来挂载Vue实例：

     

   

   

   

tips:注意，这里将vue.min.js与index.js卸载body的最底部，如果写在head里，Vue实例将无法创建，因为此时DOM还没有解析完成。

本例需要用到Vue.js的computed、methods等选项，在index.js中先初始化实例：

var app = new Vue({

    el:'#app',

    data:{

    },

    computed:{

    },

    methods:{

    }

});

我们需要的数据比较简单，只有一个列表，里面包含了商品名称、单价、购买数量。在实际业务中，这个列表是通过Ajax从服务的动态获取的，这里只做示例，所以直接写在data选项内，另外每个商品还应该有一个全局唯一的id。我们在data内写入列表list：

data:{

    list:[

        {id:1,name:'iPhone7',price:6188,count:1},

         {id:2,name:'iPad Pro',price:5888,count:1},

        {id:3,name:'MacBook Pro',price:21488,count:1},

  ]

}

数据构建好后，可以在index.html中展示列表了，毫无疑问，肯定会用到v-for，不过在此之前，我们先做一个小的优化。因为每个商品都是可以从购物车移除的，所以当列表为空时，在页面显示一个“购物车为空”的提示更友好，我们可以通过判断数组list的长度来实现该功能：

   

   

购物车为空