在线演示: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 解决刷新闪烁问题
使用vue实现todoMVC
猜你喜欢
转载自blog.51cto.com/14360146/2430778
今日推荐
周排行