# 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元件化

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`