interview:developer:vue_developer:start

Vue Developer Interview

请用Vue.js 2.0或Vue.js .0以 “SFC 单文件组件” 编码方式完成以下购物车题目。除了Vue.js 2.0, Vue.js 3.0, bootstrap 外，请尽量少用第三方库。不可使用Element UI, Mint UI等第三方库。

时限 1小时
提交方法 只需要把相关的.js和.vue文件用ZIP（不可用RAR或其他格式）压缩后电邮代码至 joe.mao@gz.questwork.com 和 don.lee@questwork.com。不要把脚手架文件如node_modules和第三方插件压缩在内。
电邮內必须寫下你的名字和微信号，另外再附上你的pdf簡历，否则不予处理。

目标

  • 提供前端端购物车功能

购物车外观

以下只是参考。

购物车功能

  • 自动计算总金额（必须）
  • 能删除已选择产品
  • 能更改数量
  • 能按產品名稱排序

数据结构 Data Structure

购物车数据为本地数据，不必从网上撷取。 

[
{ id: 1, name: "Chicken Wing", category: "Food", qty: 3, price: 10 },
{ id: 2, name: "Pizza", category: "Food", qty: 1, price: 50 },
{ id: 3, name: "Hamburger", category: "Food", qty: 1, price: 12 },
{ id: 4, name: "Coca Cola", category: "Drink", qty: 2, price: 5 },
{ id: 5, name: "Orange Juice", category: "Drink", qty: 1, price: 15 },
{ id: 6, name: "Potato Chips", category: "Snack", qty: 1, price: 8 },
]

评分准则

  • SFC组件设计
  • 编码整洁
  • 外覌

加分项

  • 组件化，模块化代码。（e.g List.vue, Button.vue)
  • 使用Vue的API计算商品总价、ES6的新规范新API处理数组等
  • interview/developer/vue_developer/start.txt
  • Last modified: 2023/03/28 20:41
  • by don.lee