04. 事件綁定

點選左右箭頭時，讓中間的文字隨之更換。

摘要

1. 先刻 HTML、CSS 畫面。
2. 把 data 中的資料，用 {{ }}、v-bind 放到 HTML 對應的位置。其中， menu 陣列裡的資料以 menu[index] 個別呼叫。
3. 在 HTML 用 v-on 在左右箭頭上綁定 changeIndex() 事件。
4. 撰寫 methods: changeIndex() 讓資料能輪播。
5. 用 computed 存放，並且 return 資料，優化程式碼。
6. 用 v-if 讓箭頭在資料的頭尾不出現。

綁事件： v-on 或 @

• 事件： 誰 (who) 在 什麼時候 (when) 做 什麼事情 (what) 。
• JS 綁定事件
• Vue 綁定事件
  • 語法：v-on:事件類型="事件名稱" 或 @事件類型="事件名稱"
  • 範例：v-on:click="chandeIndex(-1)" 或 @click="chandeIndex(-1)"

設條件： v-if

• 設定條件
  • 語法：v-if="成立條件"
  • 範例：v-if="index != 0"
• v-if 的作用是把物件放在 vertual DOM 裡面，條件不成立時會以註解的形式存在。

this

• 在單程的程式中， this 會指向整個 vue
• 例如： this.index 會取 data 中的 index

防止資料超過陣列範圍

常見的寫法

if (this.index < 0) {
    this.index = 0;
} else if (this.index > this.menu.length - 1) {
    this.index = this.menu.length - 1;
} else {
    this.index += id;
}

更簡潔一點的寫法

this.index += id
if (this.index < 0) this.index = 0
else if (this.index > this.menu.length - 1) this.index = this.menu.length

用取餘數的方式

this.index = (this.index + id + this.menu.length) % this.menu.length;

說明：

• 若除以「陣列長度」，餘數可以最小為 0 ，最大到 (陣列長度 -1)
  • 例如：若除以 3，餘數可以為 0, 1, 2
• 先加上陣列長度，是防止 id = -1 時，index 會出現負數。

循環播放 (輪播) 的寫法

小於 0 時，銜接陣列最後一筆資料；大於陣列長度時，銜接陣列第一筆資料。

this.index += id
if (this.index < 0) this.index = this.menu.length
else if (this.index > this.menu.length - 1) this.index = 0

Vue computed

可以用來處理資料，能達到類似變數的效果、自動跟資料連動。

以下列程式碼為例，如果 menu、index 變了，會算一個 today 給 HTML 使用。而且 computed 具有 catch 機制，若是 menu、index 不變，那這個 today 會一直 catch 在那個值，能被持續重複使用。

computed: {
    // 完整的寫法
    today: function(){
        return this.menu[this.index];
    },
    // ES6 的寫法
    total(){
      return this.menu.length
    }
}