（4）构建第一个vue应用_第一个vue介绍-CSDN博客

本文档详细介绍了如何使用Vue.js构建一个功能丰富的TodoList应用，包括输入内容、标记完成、删除任务、编辑任务、筛选任务状态等功能。通过数据驱动的方式，展示了Vue简化DOM操作的优势。

一、功能介绍

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

<script src="/https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

3、html代码

<body>
    <div id="todo-app">
      <div>
        <span>剩余 {
  
  {leftTodosCount}} 项未完成</span>
        <span>剩余<span style="font-weight: bold;"> {
  
  {leftTodosCount}} </span>项未完成 ---</span>
        <span>
          <input type="button" value="全部