一个 TodoList 让你上手VUE | 帆的自留地

想当初，自己自学 VUE.js 的时候，很简单的看了官网的入门教程就直接上手写项目了。从自己最初接触 VUE.js 到现在也有小半年了吧。但说实话自己对 VUE.js 的理解也仅仅在基础的会用上面。

最近开始刚好有时间，正好打算拿本书，从头到尾好好扫盲堵漏一下。刚好身边的同学也开始入门 VUE ,不妨推荐一个简单的很适合初学者练手的小🌰栗子吧。

先看下最后成品的 demo 吧：

在输入框输入待办事项，点击增加后，在下方列表显示。单击列表项，可以进行编辑，在输入框失去焦点后自动保存。点击右侧红色叉叉可以删除列表中的这一项。这个简单的小页面虽然丑了点，但是包含了数据的增删改操作，标签循环，组件的使用，真的很适合初学上手呀！

建立项目

开始写第一行代码之前，我们当然要打开我们的好朋友 IDE 啦。（什么？不会有人 2021 年还在用记事本写代码吧！）然后使用 vue cli 工具新建一个项目。

如果你的电脑还没有安装过 node.js ，是时候从 https://nodejs.org/zh-cn/ 下载安装一波了。如果你已经安装了 node.js 还没有安装 vue cli 的话，可以参考官网的教程：https://cli.vuejs.org/zh/guide/

安装就绪后，我们运行 vue cli 建立我们的项目：

vue creat todolist

接下来的配置项可以参考图片中的示例进行配置

项目建立完成后可以用 VisualStudio Code 或者你喜欢的 IDE 打开，也可以删除无用的 HelloWorld.vue，About.vue 等等。如果一切顺利，你就可以看到和我一样的目录树啦。

编写第一个 VUE

项目初始化完成后，在项目根目录可以看到三个文件夹，分别是：node_modules，public，和 src。分别用来存放 node.js 模块，公共静态文件和 vue 程序代码。通过 src 下的 router，可以看到当前的首页的路由指向的组件名为 Home。

那么我们需要编辑首页的内容，就只需要编辑 Home.vue 即可。

插入输入框

这里我们先做代表事项列表的第一个部分，输入框和提交按钮。这一步灰常简单，只需要使用 HTML 中的 input 标签就可以实现：

<form>
    <input type="text" placeholder="请输入待办事项" v-model="inPut" />
    <input type="button" value="增加" @click="addList" />
</form>

这样，我们就使用 input 标签做了一个简单的输入框和按钮。这里我们使用了 v-model 属性双向绑定了 input 的变量，并且在按钮 button 的 v-on:click 事件绑定了函数 addList()

数据绑定和方法实现

单纯在 input 标签绑定数据是不够的，我们还需要在 vue 文件中脚本部分的 data 中添加 inPut，并添加方法 addList() 的实现。这里，我们先额外添加一个数组 toDoList 用来存放待办事项列表。

<script>
export default {
  name: "Home",
  data() {
    return {
      inPut: "",
      toDoList: [],
    };
  },
  methods: {
    addList() {
      this.toDoList.push(this.inPut);
      console.log(this.toDoList, this.inPut);
      this.inPut = "";
    },
  }
}
</script>

当用户点击表单旁的增加按钮时，就会调用定义的 addList 方法。其中利用数组自带的 push 方法，将输入框输入的内容添加到数组 todoList 中。

用循环实现列表

接下来我们一起想办法将 toDoList 数组中的内容逐一遍历显示到页面中，其中最方便的就是使用 vue 的 v-for 循环功能。

<ul class="list">
      <li v-for="(item, index) in toDoList" :key="index">
        <list-item
          :item="item"
          :index="index"
          @save="saveItem"
          @delete="deleteItem"
        />
      </li>
</ul>

为了实现点击文字切换输入框的功能，我们把具体的每一条事项封装成了 listItem 组件。并向组件传递了 item，index 这两组数据，同时为组件添加了 save 和 delete 的回调方法。

编写 listItem 组件

由于要实现点击进入编辑和失去焦点自动保存，我们可以将这一部分的代码独立处理，封装成组件来使用。在 components 文件夹中新建 listItem.vue 即可快速创建一个组件。

模板布局

这里最合适的布局方案就是采用段落 <p> 标签来展示单条待办事项的内容，使用 input 标签来展示点击待办事项后显示的输入框。

<template>
  <span>
    <p v-show="!active">
      <span style="float: left" @click="activeInput">{{ item }}</span>
      <span style="float: right" @click="deleteItem">❌</span>
    </p>
    <input v-show="active" type="text" v-model="text" @blur="inactiveInput" />
  </span>
</template>

同时通过 @click 事件在点击文本时，动态修改 active 的属性值来控制是显示文本还是显示输入框。同时使用输入框的 @blur 事件触发失去焦点的动作（修改 active 为 false）。

数据绑定

设计完页面模板后，就只需要根据模板里出现的数据进行绑定即可。这里不要忘记用 props 接收父组件传过来的参数 item 和 index。

<script>
// @ is an alias to /src

export default {
  name: "ListItem",
  components: {},
  props: ["item", "index"],
  data() {
    return {
      text: "",
      active: false,
    };
  },
  methods: {
    //方法
  },
};
</script>

方法实现（调用父组件方法）

当待办事项文本被点击时触发 activeInput，于是改变 this.active 的值来切换输入框的显示，并通过 this.text = this.item 使得输入框的文字和当前文本一致。

当失去交点时，调用 inactiveInput 方法，由于待办事项数组存放在父组件 Home.vue 中，因此需要通过 this.$emit 来执行父组件中绑定的回调函数。

当点击删除图标后，调用 deleteItem 方法，调用父组件的 delete 回调来删除数组中的指定位置元素。

methods: {
    activeInput() {
      this.active = true;
      this.text = this.item;
    },
    inactiveInput() {
      this.$emit("save", this.index, this.text);
      this.active = false;
    },
    deleteItem() {
      this.$emit("delete", this.index);
    },
},

父组件方法实现

父组件中绑定回调的函数，saveItem 和 deleteItem 分别使用了 javascript 中数组自带的 splice 方法对 todoList 数组中的数据做了修改和删除。

methods: {
    addList() {
      this.toDoList.push(this.inPut);
      console.log(this.toDoList, this.inPut);
      this.inPut = "";
    },
    saveItem(index, content) {
      console.log("saveItem", index, content);
      this.toDoList.splice(index, 1, content);
    },
    deleteItem(index) {
      console.log("deleteItem", index);
      this.toDoList.splice(index, 1);
    },
},

使用CSS美化

项目很简单，只需要使用一点点 CSS 稍作美化即可。这里我主要做了简单的居中处理，并设置了宽高和背景色等。

<style scoped lang="scss">
.home {
  width: 250px;
  height: 500px;
  background-color: rgb(166, 219, 255);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .list {
    margin-left: -25px;
    width: 200px;
  }
}
</style>

完整代码

到这里，一个简单的包含基本数据操作的小 demo 就完成了，对于 VUE 的初学者熟悉 VUE.js 的特性还是灰常棒滴。当然这个案例也还有可以改进的地方，比如说可以用 LocalStorage 存储 todoList 数组，就可以长时间保存列表等等。

篇幅限制，完整代码请公众号后台回复 ”代码ToDo“ 来获取。

This blog is under a CC BY-NC-ND 4.0 Unported License
本文链接：https://coding.emptinessboy.com/2021/04/%E4%B8%80%E4%B8%AATodoList%E8%AE%A9%E4%BD%A0%E4%B8%8A%E6%89%8BVUE/