（4）构建第一个vue应用

一、功能介绍

todoList：任务计划列表
大致功能：
1.输入框输入内容后，按enter键，即可把内容添加到下方列表
2.可将单个todo标为完成
3.可删除单个todo
4.双击todo进行编辑，按esc键取消
5.显示未完成的todo数量
6.可筛选未完成的todo，已完成的todo
7.可全部标为完成，可一次性清楚全部已完成todo，亦可一次性清楚全部todo

二、实现过程

1、效果图

（1）什么都没添加：

（2）添加2项：

（3）标记一项为已完成：

（4）删除：

（5）双击编辑：

（6）点击全部：

（7）点击进行中：

（8）点击已完成：

（9）点击全部标为完成：

（10）点击清除全部：

2、引入vue

3、html代码

    

      

        剩余 {{leftTodosCount}} 项未完成
        剩余 {{leftTodosCount}} 项未完成 ---
        
          
          
          
          
          
        
      
          
      

        

          {{ todo.title }}
          
          
          
          
        
      
    
  

4、JS代码

5、整体文件

  
    
    
  
  
    

      

        剩余 {{leftTodosCount}} 项未完成
        剩余 {{leftTodosCount}} 项未完成 ---
        
          
          
          
          
          
        
      
          
      

        

          {{ todo.title }}
          
          
          
          
        
      
    
  

6、总结

传统的前端代码，是操作dom元素实现各种功能，这么做费时费力，不利于敏捷开发和新人学习。而vue是通过数据驱动，进而改变页面效果。