[今日白學]利用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裡只能有一個最外層的包裹元素 -->
  <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