没有合适的资源?快使用搜索试试~ 我知道了~
vue - Vue脚手架-TodoList案例.doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 195 浏览量
2022-07-09
20:46:26
上传
评论
收藏 921KB DOC 举报
温馨提示
试读
12页
vue - Vue脚手架-TodoList案例.doc
资源推荐
资源详情
资源评论
vue - Vue 脚手架/TodoList 案例
今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编
码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流
程倒是基本上没什么问题了,主要是很多 vue 的方法需要多熟悉一下,毕竟打破了之前的一
些对于传统 js 的认知,还需要多熟悉一下。
这两天可能内容不是很多,因为有点感冒了,状态不是很好,不想学多了怕接受的是不是
很好。
六.TODOList 案例
做这个案例主要是为了能够熟悉组件化编码流程,刚开始学做一个项目最好按照以下三个
步骤来
1.实现静态组件
先把一个项目抽取组件,使用组件实现静态页面
比如这个案例 App 的子组件就可以拆分为三个上面输入框,中间列表展示,下面总结栏,
其实组件的划分就是按照他的功能点来划分的,
比如子组件按照功能划分了三个组件,list 里每一个 item 是不是有自己的功能可以勾选,
可以删除,所以又可以进一步细分组件(如果你拆完一个组件发现很难起名字,说明你拆的
不是很合理)
既然已经拆分好组件了,就可以去 vue 项目里面写我们的组件了,创建、导入、注册三步
曲完成
接下来应该有我们的静态模板了,是这样的,一般情况下我们的一个项目大多数已经完成
了一些了,所以不会从零开始,这个时候老板派给你个任务叫你把这个实现组件化开发,你
就直接把 html 先一股脑的塞到 App.vue 里面,可以启动服务器看到整体的一个效果,然后
再去一步一步把代码拆分进我们的组件里面去
注意:有很多问题是语法报错,将那个 lintonsave 关闭即可
然后就可以开始拆分了,其他不说这个 list 里面每一条数据看出了拆分组件的重要性,我直
接在 list 组件复用 item 就可以了
css 拆分时要注意:base 等公共样式放在 App.vue,其他各自的样式各回各家但是要注意
添加 scoped
2.展示动态数据
将我们项目中需要动态真实的数据存起来 一般是数组加对象的的形式,一个对象一条数
据里面有 id、name 等等
那么数据一般保存在哪里? 回顾一下之前 props 的案例,我们的数据是不是写在父组件
里面的,通过子组件标签传给了他,子组件才能用 props 来接受外部传来的数据,所以我们
的数据要定义在每条数据这个组件的父组件
剩余11页未读,继续阅读
资源评论
- 白先生的小幸运2023-01-03支持这个资源,内容详细,主要是能解决当下的问题,感谢大佬分享~
书博教育
- 粉丝: 1
- 资源: 2837
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功