（4）构建第一个vue应用

布满荆棘的人生 2023-02-17 02:54 9阅读 0赞

# 一、功能介绍 #

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

# 二、实现过程 #

### 1、效果图 ###

（1）什么都没添加：  
![在这里插入图片描述][20200611153926267.png]  
（2）添加2项：  
![在这里插入图片描述][20200611154052471.png]  
（3）标记一项为已完成：  
![在这里插入图片描述][20200611153941528.png]  
（4）删除：  
![在这里插入图片描述][20200611153948712.png]  
（5）双击编辑：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]  
（6）点击全部：  
![在这里插入图片描述][20200611154001266.png]  
（7）点击进行中：  
![在这里插入图片描述][20200611154008176.png]  
（8）点击已完成：  
![在这里插入图片描述][20200611154017357.png]  
（9）点击全部标为完成：  
![在这里插入图片描述][20200611154024906.png]  
（10）点击清除全部：  
![在这里插入图片描述][2020061115403092.png]

### 2、引入vue ###

### 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="全部" class="selected" @click="intention='all'" />
              <input type="button" value="进行中" @click="intention='ongoing'" />
              <input type="button" value="已完成" @click="intention='completed'" />
              <input type="button" value="清除已完成" @click="clearCompleted">
              <input type="button" value="清除全部" @click="clearAll">
            </span>
          </div>
          <input type="text" 
              placeholder="添加todo"
              v-model="newTodoTitle"
              @keyup.enter="addTodo"/>    
          <ul>
            <li v-for='todo in filteredTodos' :key='todo.id'>
              <span :class="{completed: todo.completed}" @dblclick="editTodo(todo)">{
       { todo.title }}</span>
              <input type="button" value="标记完成" @click="asCompleted(todo)">
              <input type="button" value="删除" @click="removeTodo(todo)">
              <input type="text" value="编辑 todo..." 
              v-focus="true"
              v-if="editedTodo !==null && editedTodo.id===todo.id"
              v-model="todo.title"
              @keyup.enter="editDone(todo)"
              @keyup.esc="cancelEdit(todo)">
              <input type="button" value="全部标为完成" @click="markAllCompleted"/>
            </li>
          </ul>
        </div>
      </body>

### 4、JS代码 ###

### 5、整体文件 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8"><title>Vue Todo Tutorial</title>
        <style>
          .empty {
            border-color: red;
          }
    
          .completed {
            text-decoration: line-through;
          }
        </style>
      </head>
      <body>
        <div id="todo-app">
          <div>
            <span>剩余 {
       {leftTodosCount}} 项未完成</span>
            <span>剩余<span style="font-weight: bold;"> {
       {leftTodosCount}} </span>项未完成 ---</span>
            <span>
              <input type="button" value="全部" class="selected" @click="intention='all'" />
              <input type="button" value="进行中" @click="intention='ongoing'" />
              <input type="button" value="已完成" @click="intention='completed'" />
              <input type="button" value="清除已完成" @click="clearCompleted">
              <input type="button" value="清除全部" @click="clearAll">
            </span>
          </div>
          <input type="text" 
              placeholder="添加todo"
              v-model="newTodoTitle"
              @keyup.enter="addTodo"/>    
          <ul>
            <li v-for='todo in filteredTodos' :key='todo.id'>
              <span :class="{completed: todo.completed}" @dblclick="editTodo(todo)">{
       { todo.title }}</span>
              <input type="button" value="标记完成" @click="asCompleted(todo)">
              <input type="button" value="删除" @click="removeTodo(todo)">
              <input type="text" value="编辑 todo..." 
              v-focus="true"
              v-if="editedTodo !==null && editedTodo.id===todo.id"
              v-model="todo.title"
              @keyup.enter="editDone(todo)"
              @keyup.esc="cancelEdit(todo)">
              <input type="button" value="全部标为完成" @click="markAllCompleted"/>
            </li>
          </ul>
        </div>
      </body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        let id = 0;
        var app = new Vue({
            el: '#todo-app',
            data: function () {
                return {
                  todos: [],
                  newTodoTitle: '',
                  editedTodo: null,
                  intention: 'all',
                }
            },
            methods: {
              // 添加
              addTodo: function() {
                this.todos.push({id: id++, title: this.newTodoTitle, completed: false});
                this.newTodoTitle = '';
              },
              // 标记完成
              asCompleted: function(todo) {
                todo.completed = true
              },
              // 删除
              removeTodo: function(todo) {
                this.todos.splice(this.todos.indexOf(todo), 1)
              },
              // 编辑
              editTodo: function (todo) {
                  this.editedTodo = {id: todo.id, title: todo.title}
              },
              // 编辑完成
              editDone: function(todo) {
                this.editedTodo = null
              },
              // 取消编辑
              cancelEdit: function(todo) {
                todo.title = this.editedTodo.title;
                this.editedTodo = null
              },
              // 全部完成
              markAllCompleted: function() {
                this.todos.map(function (todo) {
                  if (!todo.completed) {
                    todo.completed = true
                  }
                })
              },
              // 清除已完成
              clearCompleted: function() {
                this.todos = this.todos.filter(todo => !todo.completed)
              },
              // 清除全部
              clearAll: function() {
                this.todos = []
              }
            },
            directives: {
              focus: {
                inserted: function (el) {
                  el.focus()
                }
              }
            },
            computed: {
              leftTodos: function() {
                return this.todos.filter(todo => !todo.completed)
              },
              // 未完成的数量
              leftTodosCount: function() {
                return this.leftTodos.length
              },
              // 过滤已完成和进行中
              filteredTodos: function() {
                if (this.intention === 'ongoing') {
                  return this.leftTodos
                } else if (this.intention === 'completed') {
                  return this.todos.filter(todo => todo.completed)
                } else {
                  return this.todos
                }
              }
            }
        })
    </script>
    </html>

### 6、总结 ###

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

[20200611153926267.png]: https://img-blog.csdnimg.cn/20200611153926267.png
[20200611154052471.png]: https://img-blog.csdnimg.cn/20200611154052471.png
[20200611153941528.png]: https://img-blog.csdnimg.cn/20200611153941528.png
[20200611153948712.png]: https://img-blog.csdnimg.cn/20200611153948712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611153954466.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[20200611154001266.png]: https://img-blog.csdnimg.cn/20200611154001266.png
[20200611154008176.png]: https://img-blog.csdnimg.cn/20200611154008176.png
[20200611154017357.png]: https://img-blog.csdnimg.cn/20200611154017357.png
[20200611154024906.png]: https://img-blog.csdnimg.cn/20200611154024906.png
[2020061115403092.png]: https://img-blog.csdnimg.cn/2020061115403092.png