Open FrankFang opened 7 years ago
删除「保存」和「预览」按钮 实时保存,因此不需要用户点保存 预览按钮讲移到其他地方 删除所有假数据
删除「保存」和「预览」按钮
删除所有假数据
然后打开开发者工具,把 localStorage 也清空:
然后刷新页面,页面上的数据就空了:
接下来我们有三个功能要完成:
然而老司机我思考了一下,我们好像遇到了一点问题。
我们如何判断用户没有填工作经历呢?
可以看 workHistory 这个数组的长度是否为0。也就是 workHistory: []。
但是这会造成另一个问题,用户添加工作经历的时候,我怎么知道添加的对象有哪些 key 呢?没法知道!
这说明我们的数据结构有点问题,那么我们要改造一下。
修改数据结构 改完数据结构,另一个地方也得改一下
然后清空 localStorage,画面变得清爽起来:
length > 0 才显示数据
这样一样我们就做到了「2. 如果用户啥也没填,就不要展示」。
回头看一下 resume
resume: { config: [ { field: 'profile', icon: 'id', keys: ['name','city', 'title', 'birthday']}, { field: 'workHistory', icon: 'work', type: 'array', keys: ['company', 'details'] }, { field: 'education', icon: 'book',type: 'array', keys: ['school', 'details'] }, { field: 'projects', icon: 'heart',type: 'array', keys: ['name', 'details'] }, { field: 'awards', icon: 'cup' ,type: 'array', keys: ['name', 'details'] }, { field: 'contacts', icon: 'phone' ,type: 'array', keys: ['contact', 'content'] }, ], profile: { }, workHistory: [ ], education: [ ], projects: [ ], awards: [ ], contacts: [ ], }
profile、workHistory、education、projects、awards、contacts 都出现在 config 里,这就是冗余。
冗余很有可能造成不一致,不一致就是 bug。所以我们需要清除冗余。
这几个属性完全可以从 config 里推导出来,所以我提交了如下代码:
去除数据冗余
这次提交里有一个重要的知识,那就是 Vue.js 无法监听新增的属性。
你讲代码里的三行注释打开,然后注释掉 Vue.set 那三行,就能看到这个「BUG」:你在 ResumeEditor 里编辑,ResumePreview 却什么反应都没有。
但是如果你使用 Vue.set,那么 ResumePreview 就有反应了。
请一定要自己重现这个 BUG!
这个 BUG 的原因是什么呢?请看文档,文档会告诉你一切:
深入响应式原理
搞懂这一点,面试时可以装逼。
继续代码:
将 config 和 resume 分开
Source Page
Two more things: 1.Complete the English and Chinese switch with vue-i18n 2.Import element-ui
element-ui
yjl 11th commit for v-r-g demo source
hi,我还没写完~
@FrankFang 等老师写完后,我再继续完善哈···
预览
代码
ZW
Source code Preview
预览 代码
ZLJ
预览地址 代码地址
将用户数据保存到 LeanCloud
然后打开开发者工具,把 localStorage 也清空:
然后刷新页面,页面上的数据就空了:
接下来我们有三个功能要完成:
然而老司机我思考了一下,我们好像遇到了一点问题。
我们如何判断用户没有填工作经历呢?
可以看 workHistory 这个数组的长度是否为0。也就是 workHistory: []。
但是这会造成另一个问题,用户添加工作经历的时候,我怎么知道添加的对象有哪些 key 呢?没法知道!
这说明我们的数据结构有点问题,那么我们要改造一下。
然后清空 localStorage,画面变得清爽起来:
这样一样我们就做到了「2. 如果用户啥也没填,就不要展示」。
数据冗余
回头看一下 resume
profile、workHistory、education、projects、awards、contacts 都出现在 config 里,这就是冗余。
冗余很有可能造成不一致,不一致就是 bug。所以我们需要清除冗余。
这几个属性完全可以从 config 里推导出来,所以我提交了如下代码:
这次提交里有一个重要的知识,那就是 Vue.js 无法监听新增的属性。
你讲代码里的三行注释打开,然后注释掉 Vue.set 那三行,就能看到这个「BUG」:你在 ResumeEditor 里编辑,ResumePreview 却什么反应都没有。
但是如果你使用 Vue.set,那么 ResumePreview 就有反应了。
请一定要自己重现这个 BUG!
这个 BUG 的原因是什么呢?请看文档,文档会告诉你一切:
深入响应式原理
搞懂这一点,面试时可以装逼。
继续代码: