使用Vue动手搭建todoMVC小例子

---

使用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.1.1 增加

• 3.2 全选单选与item与left
• 3.3 路由跳转
• 3.4 删除所有已经完成