vue 写的 todolist 小例子

准备将这个 todolist 在三个阶段都写一遍

1.基础阶段（不使用组件，只使用CDN引用）

2.组件阶段（使用组件化开发）

3.完整的vue阶段（包含vue-x啥的，希望能写一个很好的，有丰富功能，样式好看的 todolist )

---

一、基础阶段

需求：

一个简单的待办清单。
输入框，用户在输入框输入信息，点击提交按钮，可提交任务到待完成区。

待完成任务有两个按钮，完成按钮可将任务提交至完成区，删除按钮可将任务删除。

完成任务有一个按钮，删除按钮将任务删除。

不追求好看的样式，只求完成基本的逻辑。

思路：

1. 添加任务到未完成任务区
要用v-model将data中的一个变量和input的value双向绑定，获取输入内容

给输入框监听一个回车点击事件（@keyup.enter="")，添加按钮监听一个点击事件

在data类定义一个数组变量，用来储存输入值

v-for遍历li，将数组下的项显示在li中

回车点击事件和按钮点击事件触发的添加函数，放在methods中，内容是将获取的输入内容用push传到数组中，并将输入内容更新为空

2.添加未完成任务到完成任务区
未完成任务区的任务组成一个数组，完成任务区的任务也组成一个数组

就是先将要移动的那一项 push 进完成任务区的数组，再将未完成任务区的那一项用 splice() 删除

3.删除指定任务
就是删除一个数组的特定项，用获取的 index 和 splice() 方法

两个任务区删除任务调用的方法是不一样的

具体代码

html

<div id="app">
  <!--@keyup.enter绑定空格键点击事件-->
  <input type="text" v-model="inputValue" @keyup.enter="addToDoThings">
  <button @click="addToDoThings">添加</button>
  <h2>待完成项目</h2>
  <ul>
    <li v-for="(item,index) in list">
      <button @click="moveToDoThings(index)">完成</button>
      {{item}}<button @click="removeToDoThings(index)">删除</button>
    </li>
  </ul>
  <h2>已完成项目</h2>
  <ul>
    <li v-for="(finishedItem,index) in finishedList">
      {{finishedItem}}<button @click="removeFinishedToDoThings(index)">删除</button>
    </li>
  </ul>
</div>

js

const app = new Vue({
  el: "#app",
  data: {
    inputValue: "",
    list: [],
    finishedList: []
  },
  methods: {
    addToDoThings() {
      if(this.inputValue === ""){
        alert("输入不能为空！请重新输入")
      }else{
        this.list.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeToDoThings(index) {
      this.list.splice(index,1);
    },
    removeFinishedToDoThings(index) {
      this.finishedList.splice(index,1);
    },
    moveToDoThings(index) {
      //将未完成的指定项传入到已完成
      this.finishedList.push(this.list[index])
      //将未完成的指定项删除
      this.list.splice(index,1);
    }
  },
  computed: {
  }
})