By

筆記

  • SSOT: Single Source of Trust，單一信任來源，只相信後端受保護的資料。

  • NTU: Never Trust User，使用者可能會用意想不到的方法弄壞網站系統。

  • new Vue() 出來的都是 component，所以統一使用 component 的架構即可。

  • 如果遇到無法改陣列的值，需透過 this.$set()。

// this.$set(陣列, index, 新值)
this.$set(this.sections, index, this.step % 2 === 0 ? 1 : 10)

// this.step % 2 === 0 ? 1 : 10 
// 表示：除以 2 的餘數為 0 (偶數) 的話填 1，餘數為 1 (奇數) 的話填 10。
  • 淡入淡出效果，使用 Vue 提供動畫的 Tag，並在 style 加上
/* 進退場點 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 正在進退場 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

fade-enter-leave

  • 用資料來決定畫圈畫叉，所以就算改下一步的 class 也沒用。

  • 用資料來決定輸贏，所以就算直接修改 class 把圈改叉，資料仍不會變動。

  • this.$nextTick() 畫面更新完執行。

實作

參考