A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© AngularBaby 中级黑马   /  2017-12-21 18:46  /  7756 人查看  /  24 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 AngularBaby 于 2017-12-28 21:24 编辑

在线演示:Demo

效果如下:
todoMvc.gif

步骤如下:
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
0.png

1.3 修改 index.html 文件:
      引入vue.js
1.png

1.4 给body中的section标签 添加ID
2-1.png


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

2.1 app.js基本结构如下:
3-0.png

2.2 修改 index.html 中 ul 标签,留下一个 li 标签,使用 v-for 渲染 list 数据
如下图:
3-1.png

2.3 继续修改 li 标签,class 增加三元运算,input 增加 v-model 绑定 status
如下图:
3-3.png

此时,页面效果如下
iScroll2.gif


2.4 添加 v-cloak 解决刷新闪烁问题
3-5.png

回复本贴可继续阅读,下载源代码
游客,如果您要查看本帖隐藏内容请回复

点击有惊喜






24 个回复

倒序浏览
棒棒哒~
回复 使用道具 举报
棒棒哒~11111
回复 使用道具 举报
套路啊啊啊啊啊啊啊啊
回复 使用道具 举报
而非翁大多擦多多多多多多多多多多多多多多多多多多多
回复 使用道具 举报
henhaowqeqweqweq
回复 使用道具 举报
来看看是啥
回复 使用道具 举报
回复 使用道具 举报
感谢楼主分享,好人一生平安
回复 使用道具 举报
学习学习学习学习学习学习学习学习学习学习学习学习vv
回复 使用道具 举报
6666666666666666666
回复 使用道具 举报
6666666666666666666666666
回复 使用道具 举报
5555555555555555555555555
回复 使用道具 举报
断水断电飒沓撒大所大a
回复 使用道具 举报
xuyao xuyao
回复 使用道具 举报
太棒了8也
回复 使用道具 举报
123123和规范化发过后
回复 使用道具 举报
牛逼啊111111111111111
回复 使用道具 举报
哈哈哈哈哈哈哈哈哈哈或
回复 使用道具 举报
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马