重複的事情做多了就變成肌肉記憶，做到數不請就會變反射動作。

在認識了那麼多 Vue 的指令之後，ㄧ定會很想實際的動手做，我們就來做一個產品列表，並把我們之前所學的應用在這個產品列表的功能上。
我們還是使用以 CDN 載入 Vue 的方式來實作頁面，所以別忘了將 Vue.js 載入頁面。

這個實作的前半段和我們之前實作的 TodoList 很像，也趁這個機會複習一下。
在實作之前，同樣的我們先把要實作的功能一一列出來，接這把畫面刻出來，這裡為了示範就沒特別刻畫面請包涵～

功能需求：

• 產品列表包含 ID、產品名稱
• 新增產品與增加產品的時間戳
• 刪除產品
• 搜尋產品

刻畫面

• 先將產品列表畫面的 HTML 部分準備好，為了讓畫面看起來較整齊，選擇以表格的方式來顯示產品列表。
• 在<script>裡創建一個 Vue 的實例，把先將要用到的資料以陣列＋物件的格式準備好，再去 HTML 把要綁定好的元素以 Vue 的v-指令綁定好。
• 如果綁定事件的呼叫函式需要傳參數，可以使用小括號將傳參數進去例如：@click="addItem(id, name)"。
• 使用v-for將資料遍歷出來，並渲染到頁面上

先試著把在data裡的列表內容選染到頁面，如果這一步成功了，再進行下一步增加的部分。

增加方法

增加方法的步驟有：

1. 在data:{}已先預備好空的資料格式，利用方法帶參數的方式取得資料的各屬性
2. 將拿到的屬性組織成物件的格式
3. 以 JS 的內建函式方法push()把拿到的資料放入 lists 中
4. 在各標籤中有做雙向綁定，每當資料有變動 Vue 會自動去偵測與監聽，並自動重新渲染到頁面去。
   上面的資料操控也表示我們完成一部分的資料操作邏輯了

刪除方法

1. 在刪除的按鈕上綁定刪除的事件
2. 需要增加阻止默認的行為（刷新頁面），所以在綁定事件時可增加一個修飾符.prevent
3. 要指定刪除哪一個需要給一個唯一值 id，所以在刪除方法中也要將以參數的方式帶入id
4. 如何根據拿到的 id 找到 index? 找到對應的index就可用splice()的方法刪除

先看看 codepen 的實作結果

再來看看程式碼
html 的部分

<h1>商品列表增加、刪除功能</h1>
<div id="app">
  <h3>增加商品</h3>
  <div>
    ID:<input type="text" v-model="id" /> | Name:<input
      type="text"
      v-model="name"
    /><input type="button" value="Add" @click="addItem" />
  </div>
  <table>
    <thead>
      <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Time & Date</td>
        <td>Operation</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in lists" :key="item.id">
        <td>{{ item.id }}</td>
        <td v-text="item.name"></td>
        <td>{{ item.timeDate}}</td>
        <td><a href="" @click.prevent="deleteItem(item.id)">Delete</a></td>
      </tr>
    </tbody>
  </table>
</div>

Vue.js 的部分

const vm = new Vue({
  el: '#app',
  data: {
    id: '',
    name: '',
    keywords: '',
    lists: [
      {
        id: 1,
        name: 'Book',
        timeData: new Date(),
      },
      {
        id: 2,
        name: 'Ipad',
        timeData: new Date(),
      },
      {
        id: 3,
        name: 'Smart phone',
        timeData: new Date(),
      },
    ],
  },
  methods: {
    addItem: function () {
      var item = { id: this.id, name: this.name, timeDate: new Date() };
      console.log(item);
      this.lists.push(item);
      this.id = '';
      this.name = '';
      // this.id=this.name=''
    },
    deleteItem: function (id) {
      // 用some()來循環，找到會立即中止
      // 用迴圈去找index
      this.lists.some((item, i) => {
        if (item.id == id) {
          this.lists.splice(i, 1);
          return true;
        }
      });
      // 另一種抓index的方式
      // let index = this.lists.findIndex((item) => {
      //   if (item.id == id) return true;
      // });
      // console.log(index);
      // this.splice(index. 1)
    },
  },
});

明天我們再來進行搜尋的部分。

每日一句法文有益身心：Il fait beau! --> 以.飛.ㄅㄡ ˋ！ --> 天氣真好！