---
# System prepended metadata

title: Vue 基本指令
tags: [Vue, JavaScript]

---

# Vue 基本指令
## v-model
*    雙向綁定(更動資料可改變畫面，更動畫面也會改變資料)
        *    $set：強制加入雙向綁定(資料沒有預先定義時)(Vue.set())
                *    `this.$set(target, key, value); // 目標, 欄位(物件屬性、陣列索引), 值`
*    修飾符
        *    `.lazy`：避免持續性的觸發，離開input以後才會改變
        *    `.number`：限制只有數值型別的資料才能寫入
        *    `.trim`：修飾掉結尾的空白
*    表單運用
        *    Select
                *    所綁定的 v-model 其值來自於`<option>`內的 value
        *    Check
                *    預設`checkbox`是作為一個資料的 true or false(可使用`true-value`、`false-value`更改預設值)
                *    如果多個`checkbox`的 v-model 是對應同一個 data，data視為陣列
        *    Radio
                *    `radio`的 v-model 是對應同一個 data 時，該 v-modal 的值則是核取的`radio`選項

## v-on(縮寫：@)
處理互動式行為(EX:click、dblclick)
*    事件修飾符
        *    `.prevent`：調用 event.preventDefault()，取消預設行為
        *    `.stop`：調用 event.stopPropagation()，取消冒泡機制
        *    `.capture`：添加事件偵聽器時使用 capture 模式(由外而內)
        *    `.self`：只當事件是從偵聽器綁定的元素本身觸發時才觸發回調
        *    `.once`：只觸發一次
*    按鍵修飾符
        *    `.enter`

## v-bind(縮寫 : )
動態增加屬性，類似setAttribute
*    綁定CSS樣式 
        *    `:class="{要新增的className:判斷式}"`，true時才新增
*    `:value` 動態屬性可傳入data內的值或js表達式
*    `:style="{fontSize:1.5+'rem'}"`，以物件形式傳入
*    動態屬性vs靜態屬性
        *    靜態
                *    無法進行運算
                *    傳入一律為字串
        *    動態
                *    可傳入表達式結果
                *    可傳入Vue的data
## 渲染在畫面上的指令
*    `{{}}`
*    `v-text`
*    `v-html`：可渲染html標籤
*    `v-once`：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。

## 切換DOM元素的呈現
*    `v-if`：搭配`v-for`作條件判斷，true才呈現
        *    完整移除DOM元素，生命週期重新計算
*    `v-show`：將DOM元素隱藏，實際沒有移除

## v-for
`v-for="(item,key) in arrayName"`：執行forEach
*    為避免替換有誤，強烈建議都加上`:key`
*    `v-for`、`v-if`避免混用，建議放在不同標籤上

## Methods vs Computed
* computed：在監控資料更動後，重新運算結果呈現於畫面上，不會修改資料，只會回傳用於畫面呈現的資料(必定有return)
* methods：互動的函式，需要觸發才會運作，

## Watch
* 監聽DOM元素
## Vue元件化
```javascript=
Vue.component('componentName',{
    data: function() {
        return { // 物件
            counter:0
        }
    },
    templete:`
    <div>
        你已經點擊 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
    </div>
  `
});

//html使用
//<componentName></componentName>

```

###### tags: `JavaScript` `Vue`
