###### tags: `Vue3`

# 以前不知道的 VUE 指令與用法

可能之前學 vue 的時候有些東西沒注意到，這次剛好參加了
:::success
"六角學院" 的 vue3 vue-夏令營公開頻道
:::

剛好複習一下 vue 而且也可以跟著學習最近新出的 vue3

## 1. v-model 修飾符

這部分比較少用，透過這次的活動，有點發現新大陸 ~XD

### .lazy
`lazy` : 避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步）

當使用 input 時，如果使用 v-model.lazy="" 的綁定，在編輯輸入框時不會觸發 data 變動，而是離開了 input 才會觸發更新。

(感覺有點類似所謂防抖機制，可是又有點不一樣😂😂)

### .number
`number`：限制只有數值型別的資料才能寫入，以下範例中的 number 資料會是以 number 型別傳入，無法透過該 input 套用其它資料型別。

:::warning
無論 input type 為何，input 預設所傳入的型別為字串
可以使用 v-model.number="" 的綁定，確保用戶所輸入的為純數值
:::

這個覺得算是好用又簡單的功能，可惜太晚知道了~　🤣
之前都還特別去找 JS 正規表達式的寫法去判斷，以防止被惡意亂輸入

### .trim
`trim`：修飾掉首尾的空白

這就比較熟悉了，可以自動去除頭尾的空白~

[六角筆記 v-model](https://hackmd.io/@hexschool/r1ETztpdI)

---

## 2. v-for

v-for="(item, key) in array" :key=""

之前是只知道 v-for 用來渲染陣列而已，沒想到也可以渲染 **"物件(Object)"** (該打@@)

:::danger
key：如果是陣列則為該迭代的索引位置，如果是物件則為該迭代的物件屬性
:::


[圖片範例 by 六角學院](https://codepen.io/hsiangfeng/pen/XWmpRqQ?editors=1010)

---

## 3. v-bind

不管是綁定 class 還是 style 都可以直接綁定 **"物件(Object)"** ，可以讓 html 看起來比較不會混亂

### :class with object

<div class="box" :class="objectClass">

...

const app = {
  data() {
    return {
      objectClass: {
        'rotate': false,
        'bg-danger': false,
      },
    }
  }
}

Vue.createApp(app).mount('#app')

### :style with Object

<div class="box" :style="styleObject"></div>

...

const app = {
  data() {
    return {
      // 使用駝峰式命名
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px'
      }
    }
  }
}

Vue.createApp(app).mount('#app')

以上兩個用法上是差不多的，不過之前沒這麼使用過，現在學到一招了XD

:::warning
第一次看到的用法~ **:class with array**

<br>

  <button class="btn" :class="[...arrayClass]">請操作本元件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">
    <label class="form-check-label" for="classToggle3">切換樣式</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">
    <label class="form-check-label" for="classToggle4">啟用元素狀態</label>
    
    
    ...
    
    
const app = {
  data() {
    return {
      // Array 操作
      arrayClass: [],
    }
  }
}

Vue.createApp(app).mount('#app')

透過 input value 直接給 class 的名稱
再透過 [...arrayClass] 複製陣列的方式，將每個被勾選的 value 都推送到 arrayClass 來綁定 class !!!
:::

[六角筆記 v-bind](https://hackmd.io/@hexschool/S1DJeKTdL/%2FdxbCu6YTTh2q-Z0p1vWSjw)

---

## 4. computed

:::danger
computed : 不修改原始的數據，只是為了 **" 渲染畫面產生新的值 "**

watch : 類似 methods 會更動原始的數據
:::

以前只知道 computed 可以用來做資料運算而已，卻沒注意到其他的用法

反而多定義了很多變數來複製原始數據，再拿來渲染 @@(該打~)

:warning: **觸發時機** :warning:

當被運算的值，發生改變的時候就會被觸發
但 值 需要是在 this 底下(也就是 data內所宣告的)才行

---

## 5. v-cloak

:::danger
如果使用 v-if / v-show 可能在一開始渲染時出現閃爍的情況
:::

:warning: **解決方式** :warning:

使用 v-cloak 指令和 css 規則

// html : 需要加上 v-cloak
<button v-if="count === 8" v-cloak>再玩一局</button>

// css : 設定 css 樣式
[v-cloak]{
    display:none;
}

---

## 更多關於 vue 的參考資料
[六角學院筆記](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fd-oyhhRoRPSvL1uoM1BGJw)