使用vue实现todoMVC

简介在线演示:Demo效果如下:步骤如下:1、搭建项目基本结构2、实现基本数据渲染及关联3、实现增、删、查、改等基本功能4、实现数据本地存储1、搭建项目基本结构1.1 从github上克隆 todomvc 的模板文件github链接: https://github.com/tastejs/todomvc-app-template.git(本贴附件中同样提供下载)1.2 引入 vue.js 文件使用 n

在线演示:Demo

效果如下:
145115q0h0ym5x5ztiigi5.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
150307plz8mzo88qzf6l62.png.thumb.jpg

1.3 修改 index.html 文件:
      引入vue.js
150213z8yf2j9bz8b2bufn.png.thumb.jpg

1.4 给body中的section标签 添加ID
150719ghz9uzuhmun3p9w2.png.thumb.jpg


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

2.1 app.js基本结构如下:
151852v5o432ez2odoywbe.png.thumb.jpg

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

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

此时,页面效果如下
170857vjjcj8j0jyejjctj.gif


2.4 添加 v-cloak 解决刷新闪烁问题
204751nnyzfp6g7gf6bbt6.png.thumb.jpg

本文转自:https://blog.51cto.com/14360146/2430778