使用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.2 全选单选与item与left
  • 3.3 路由跳转
  • 3.4 删除所有已经完成