黑马程序员技术交流社区

标题: 【广州前端】- 使用vue实现todoMVC [打印本页]

作者: AngularBaby 时间: 2017-12-21 18:46
标题: 【广州前端】- 使用vue实现todoMVC
本帖最后由 AngularBaby 于 2017-12-28 21:24 编辑

在线演示：Demo

效果如下：

步骤如下：
1、搭建项目基本结构
2、实现基本数据渲染及关联
3、实现增、删、查、改等基本功能
4、实现数据本地存储

1、搭建项目基本结构
1.1 从github上克隆 todomvc 的模板文件

github链接： https://github.com/tastejs/todomvc-app-template.git

（本贴附件中同样提供下载）

1.2 引入 vue.js 文件

使用 npm install vue -S 下载 vue

1.3 修改 index.html 文件：
引入vue.js

1.4 给body中的section标签添加ID

2、实现基本数据渲染
编写 app.js 文件

2.1 app.js基本结构如下：

2.2 修改 index.html 中 ul 标签，留下一个 li 标签，使用 v-for 渲染 list 数据
如下图：

2.3 继续修改 li 标签，class 增加三元运算，input 增加 v-model 绑定 status
如下图：

此时，页面效果如下

2.4 添加 v-cloak 解决刷新闪烁问题

回复本贴可继续阅读，下载源代码

点击查看更多精彩前端资源

点击有惊喜

作者: vuer 时间: 2017-12-28 19:01
棒棒哒~

作者: plm2 时间: 2018-1-9 23:32
棒棒哒~11111

作者: qqlcx5 时间: 2018-1-10 20:11
套路啊啊啊啊啊啊啊啊

作者: 星芒背刺 时间: 2018-1-19 14:38
而非翁大多擦多多多多多多多多多多多多多多多多多多多

作者: 小酷不是天使 时间: 2018-3-23 16:57
henhaowqeqweqweq

作者: guoqule62382023 时间: 2018-4-10 17:29

来看看是啥

作者: web萌新 时间: 2018-5-15 07:22
ghhhhbbjhnnjj

作者: gx28ga 时间: 2018-5-23 11:17
感谢楼主分享，好人一生平安

作者: 邢航 时间: 2018-5-23 14:38
学习学习学习学习学习学习学习学习学习学习学习学习vv

作者: mvpicy 时间: 2018-6-26 15:36
6666666666666666666

作者: 墨纸baby 时间: 2019-1-23 20:12
6666666666666666666666666

作者: a1002427060 时间: 2019-1-26 14:31
5555555555555555555555555

作者: bubblepink 时间: 2019-2-5 13:35
断水断电飒沓撒大所大a

作者: Jasonxing 时间: 2019-2-12 11:06
xuyao xuyao

作者: kimous 时间: 2019-7-12 10:32
太棒了8也

作者: yyy嘤嘤嘤 时间: 2019-8-7 10:45
123123和规范化发过后

作者: 排比句狂魔 时间: 2019-11-3 16:43
牛逼啊111111111111111

作者: 6446sad4f 时间: 2019-11-6 18:34
哈哈哈哈哈哈哈哈哈哈或

作者: 煞笔来了 时间: 2019-12-25 20:19

作者: fnfnnfnfnffn 时间: 2020-5-29 21:09
hahahahahah学到了

作者: touko 时间: 2021-2-20 16:35
正在学习~感谢分享

作者: 肥鱼dd 时间: 2022-5-18 04:19
标题: RE: 【广州前端】- 使用vue实现todoMVC

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2