[今日白学]利用Vue-CLi实现一个简单的TodoList工具

#葫芦娃，葫芦娃，一根藤上七个瓜                       (๑‾ ꇴ ‾๑)#

本文章仅用作于个人学习笔记（羞耻++）复制代码

TodoList需要有以下功能：

1.在输入框中动态添加todo-item,点击添加按钮后在列表中显示
2.点击todo-item对应的删除按钮可以实现删除
3.显示todo-item的添加时间复制代码

脚手架已经搭好了，先来看看根组件App.vue里都有啥

如图：

1）第一步当然是把”不必要的“HelloWorld组件和样式都清理掉啦（HelloWorld：mmp）。

2）接下来把列表的显示功能和各种事件绑定写上去（每一步的注释基本都写了•﹏• ）

<template>
  <!-- template里只能有一个最外层的包裹元素 -->
  <div id="app">
    <!-- 留着logo好像还挺好看的 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <!-- 创建双向绑定,绑定值为inputValue -->
      <input type="text" v-model="inputValue">
      <!-- 创建监听事件@click(v-on:click的简写),接收一个调用的方法 handleSubmit -->
      <button @click="handleSubmit">添加</button>
      <!-- item是数组里每项元素的别名?,index为下标.这里临时用index绑定key值 -->
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <!-- item指list数组里的每一项,(text,time)就是每一项数组里的对象的值emmmm -->
          {{item.text}}
          <span>创建于:{{item.time}}</span>
          <button @click="handleDelect">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "app",
  // 我们的数据对象
  data() {
    return {
      inputValue: "",
      list: [
        { text: "便签模板一", time: "2019-06-24 00:05:00" },
        { text: "便签模板二", time: "2019-06-29 00:00:20" }
      ]
    };
  },
  // 在'methods'对象中定义方法
  methods: {
    handleSubmit() {
      console.log("这里写添加按钮的逻辑");
    },
    handleDelect() {
      console.log("这里写删除按钮的逻辑");
    }
  }
};
</script>
<style></style>
复制代码

3）接下来就到了最快乐的写逻辑时间(◔◡◔)

• 这里我们先把list里的默认数据删掉
  
• 给v-model添加trim修饰符用于自动过滤用户输入的首尾空白字符（trim的官方介绍）
• 让<button @click="handleDelect">删除</button>的handleDelect方法把index的值传进去<button @click="handleDelect(index)">删除</button>

  methods: {
    // 'this' 指向 vm 实例
    handleSubmit() {
      // inputValue的值不为空我们才添加数据到数组里
      if (this.inputValue != "") {
        // 把input上的绑定的值inputValue添加到数组的对象里
        this.list.push({
          text: this.inputValue,
          time: new Date().toLocaleString()
        });
        // 每次添加完都使input的值为空
        this.inputValue = "";
      }
    },
    handleDelect(index) {
      // 循环时传来的index下标
      this.list.splice(index, 1);
    }
  }复制代码

4）逻辑写完就该写CSS魔法了（样式过丑就不贴了= =）

一个简单的TodoList工具就写好了

效果图：

完整代码：

template：

<template>
  <!-- template里只能有一个最外层的包裹元素 -->
  <div id="app">
    <!-- 留着logo好像还挺好看的 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <div>
        <!-- 创建双向绑定,绑定值为inputValue -->
        <input type="text" placeholder="添加便签" v-model.trim="inputValue">
        <!-- 创建监听事件@click(:on-click的简写),接收一个调用的方法 handleSubmit -->
        <button @click="handleSubmit">添加</button>
      </div>
      <!-- item是数组里每项元素的别名?,index为下标.这里临时用index绑定key值 -->
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <!-- item指list数组里的每一项,(text,time)就是每一项数组里的对象的值emmmm -->
          <div>{{item.text}}</div>
          <small>
            <span>创建于:{{item.time}}</span>
          </small>
          <button @click="handleDelect(index)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>复制代码

script代码：

<script>
export default {
  name: "app",
  // 我们的数据对象
  data() {
    return {
      inputValue: "",
      list: []
    };
  },
  // 在'methods'对象中定义方法
  methods: {
    // 'this' 指向 vm 实例
    handleSubmit() {
      // inputValue的值不为空我们才添加数据到数组里
      if (this.inputValue != "") {
        // 把input上的绑定的值inputValue添加到数组的对象里
        this.list.push({
          text: this.inputValue,
          time: new Date().toLocaleString()
        });
        // 每次添加完都使input的值为空
        this.inputValue = "";
      }
    },
    handleDelect(index) {
      // 循环时传来的index下标
      this.list.splice(index, 1);
    }
  }
};
</script>复制代码

原来代码贴过来是不能直接按Ctrl-V的（会全部缩成一行），要右键粘贴为纯文本才行

亏我折腾了这么久(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥｀)

—— End