使用Vue动手搭建todoMVC
2018年4月16日 晴 微风 温度 10-22°C >
先来介绍下什么是 todoMVC，todoMVC呢就是一个 任务板块；
其中分为三个板块：将要做,正在做,已完成;
具体如图>
https://github.com/tastejs/todomvc-app-css/raw/master/screenshot.png
- 1 首先先准备好环境
- 1.1 准备好todomvc模板
首先先在github中搜索todomvc找到一个排行最高的模板 ，点进去不要直接download，因为这个是已经写好的。所以 要先进入这个 作者的主页，然后下拉 找到 todomvc-app-template 该库就是 我们需要的 模板,然后完整download下来保存 在一个新的文件夹中并解压- 1.2 准备好Vue环境
如果你电脑中已经 配置过hexo 以及npm 环境后 只需要 在 todomvc当前文件夹下 打开dos窗口 运行 npm intall --save vue 在此文件夹下配置初始化Vue
好 这样 准备工作差不多已经做好
下面开始 正式讲述
- 2
- 2.1 打开JS文件夹中的 app.js 开始编辑
//首先清空已经存在的东西，
//先定义一个vue对象模板
var vm = new Vue({
// 然后我们对html进行vue绑定,
el:".todoapp1",
//data数据模块
data:{
},
//methods方法模块
methods:{
},
//watch监听模块
watch:{
},
//computed计算模块
computed:{
}
});
- 3 明确一下我们的页面效果以及背后的编程逻辑
- 3.1 增删改查
- 3.2 全选单选与item与left
- 3.3 路由跳转
- 3.4 删除所有已经完成
