在线演示：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 解决刷新闪烁问题


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

游客，如果您要查看本帖隐藏内容请回复

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

点击有惊喜

棒棒哒~

棒棒哒~11111

套路啊啊啊啊啊啊啊啊

而非翁大多擦多多多多多多多多多多多多多多多多多多多

henhaowqeqweqweq

来看看是啥

ghhhhbbjhnnjj

感谢楼主分享，好人一生平安

学习学习学习学习学习学习学习学习学习学习学习学习vv

6666666666666666666

6666666666666666666666666

5555555555555555555555555

断水断电飒沓撒大所大a

xuyao xuyao

太棒了8也

123123和规范化发过后

牛逼啊111111111111111

哈哈哈哈哈哈哈哈哈哈或