Vue-小白的练手项目之旅

前言

项目地址

其实很久之前就接触过Vue,但是没有经过系统的学习，只有一些零散的知识，为了更加对 Vue 有一个全面的了解，所以我决定做一个练手的项目— —"ToDoList"。

"ToDoList"涉及到的知识点涵盖了大部分Vue的 API。

• 计算属性
• 监听属性
• 生命周期
• Class 与 Style 绑定
• 条件渲染
• 列表渲染
• 事件处理
• 表单输入绑定
• 组件基础
• Prop
• 过渡动画
• 时间控件,还有弹窗等采用了比较热门的库 "Vux"
• 数据保留在 "Local Storage" 中，刷新之后也不会丢失数据
• 数据管理用的 "Vux"

先来看看完成后的预览效果。

项目预览

实现的功能

• 任务根据时间排序
• 完成任务
• 删除任务
• 任务列表存储到本地

你可能会遇到的问题

复杂数据类型在栈中存贮的是指针,所以赋值给新的变量也会改变原始的变量值.

我遇到的这个场景在于把时间戳转为时间格式的时候，为了不影响原有的数据，我已经进行过数据拷贝了，但发现还是会影响到原来的数据，我百思不得其解，后面在思否论坛上看了问题。我觉得说得挺好的。

详情见 props 传值的问题

解决方案：

• 可以手动深度克隆一个复杂的数据出来,循环或者递归都行
• 强大的 JSON.stringify 和 JSON.parse ，将对象或者数组先转为字符串然后再转回来，我采用的就是这种方法。

本地存储数据中的数据已经发生了更改，但是却不会触发 watch 侦听属性

这个问题遇到的场景在设置完成任务的时候，执行的方法已经让本地存储数据发生了改变，但是页面上却没有任务动静，怎么也监听不到这个事件，后面在前辈的帮助下，重新查阅了 watch 的 API。

解决方案：

• 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深

// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
watch: {
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
}

这些都不是什么大问题，大多数是因为自己没有仔细参阅官方文档手册而发生的问题，但是出现问题并不要灰心气馁，重要的是你如何去解决问题。填的坑多了，自然也就熟悉了。

最后的总结

详细的教程是没有的😂，我不太会写，我只能分享我的心得，大家可与自己去实现一个这样的练手小项目。

在做项目之前，首先要有一个整体的思路，你想要一个什么样的项目出来，你需要怎么去实现它，心里应该要有一个底，而不是盲目的去做，想到什么就去做什么。

比如，我做这些项目之前，我首先要想的是前端页面布局之类的，我想展示一个怎样的页面出来，怎么看着简洁舒服。我会在本子上画一个简图，完成静态的页面之后，就开始做功能，我需要实现哪些功能，我应该怎么去实现这个功能，为了实现这个功能我会用到哪些 API的，等等。

最后的最后欢迎👉star 👈 ,我知道我还有很多不足的地方，代码也有很多可以优化的地方。大家可以根据我实现的功能自己去独立完成这个小项目，我的项目仅作为一个参考，只有自己独立完成以后才知道它带给你的收获有多少。

再次附上项目地址：github.com/mraing/Todo…

谢谢大家支持，小伙们加油呀ヽ( ^∀^)ﾉ