# <font color="#FF0000">ONLY</font> <font color="#FF8C00">ONLY</font><font color="#FFD600"> VUE </font><font color="#32CD32">VUE</font> <font color="#228B22">VUE</font>

> Vue.js 最主要的核心功能有兩個部分：「宣告式渲染」與 「元件系統」

### 📍 Vue2 template

// Vue 2.x
const vm = new Vue({
  data: {
  message: 'Hello Vue!'
  }
});
// 透過 $mount 掛載至指定的網頁節點
vm.$mount('#app');

### 📍 Vue3 template

const vm = Vue.createApp({
  data () {
    return {
        message: 'Hello Vue 3.0!'
    }
  }
});

// 透過 $mount 掛載至指定的網頁節點
vm.$mount('#app');

## 📒 template 模板屬性
#### 🔻template 內的 HTML 當作模板來使用，顯示的效果與直接使用 HTML 模板是一樣的。

## 📑 <font color="#FF0000">模板衝突</font>
#### 🔻若所使用的後端模板也採用 Mustache {{ }} 的模板語法來表示，則可以利用 Vue.js 提供的 delimiters 屬性 來重新定義模板語法
## 📑 <font color="#FF0000">資料公用汙染</font>
#### 🔻若使用的資料是同一個，則在改變另一個數值時，另一個也會跟著改變，所以建議寫成不同物件
## 📑 <font color="#FF0000">變數命名錯誤</font>
#### 🔻若是以底線 _ 或錢字號 $ 作為開頭的屬性，可能會與 Vue.js 內建的屬性與 API 名稱產生衝突，所以應該盡量避免

## 📒 methods 方法
## 📑 <font color="#FF0000">箭頭函式 (arrow function) </font>
#### 🔻由於箭頭函式沒有自己的 this，也就是說，在箭頭函式裡面使用 this，實際上這個 this 跟外面的 this 是同一個，所以如果要在 methods 裡面需要存取實體狀態的情況，就不適合使用箭頭函式
### <del>你很懶惰的方式 :
## 📒 computed 計算屬性
#### 🔻computed 寫法跟 methods 的寫法有 87% 像，差別就只有模板中的 少了小括號

## 📑 <font color="#FF0000">computed 特性</font>
#### 🔻computed 會將結果暫存，觀察的屬性沒有被更新的情況下，computed 就不會重複被執行
#### 🔻同樣的重複計算，用 computed 來處理會比 methods 效能來得好，computed 屬性中的 function 無法使用參數，需要帶入參數的情況，只能使用 mehtods 來處理

### 🎯 加入 get 與 set 的 function:
#### 🔻computed 除了可以將另一個實體屬性「加工」後回傳 (get)，還可以透過 (set) 寫回 computed 屬性

## 📒 directive 指令
#### 🔻指令搭配運算式 (expression) 的值被改變時，對應的標籤 (包括節點、元件等) 會隨之影響，透過指令的作用與改變狀態(資料)的變化來操作整個網頁系統
#### 🔻 {{ }} 的模板語法並沒有辦法被套用在 HTML 標籤的「屬性」上，需要由 Vue.js 來控制標籤的「屬性」
:::success
## 📑 <font color="green">v-bind 屬性綁定</font>
### ✏ 正規寫法 :
### ✏ 簡易寫法 :
### 結果 :
### 結論 :
#### 🔻常見的標籤屬性如 id 、 圖片的 src，或是連結的 href 等 DOM 的屬性，都是可以透過指令 v-bind 來控制它的內容
:::

:::info
## 📑 <font color="blue">v-model 表單綁定</font>
### 1. input 文字框
### 2. textarea 文字方塊
### 📍 在 <textarea> 裡面使用大括號 {{ }} 模板語法而不是 v-model ，更新的內容不會寫回data
### 3. radio 單選框
### 📍 單選框 data :

### 4. checkbox 複選框
### 📍 複選框 data :「陣列」
### 5. select 下拉列表選單
### 📍 選單 data :
### 結論 :
#### 🔻v-model 指令的表單元素會自動忽略原有的 value、 checked 與 selected 屬性，以 data 內的狀態為主
:::

:::info
## 📑 <font color="blue"> v-model 與修飾子 (實用)</font>
### 1 .number
#### 🔻 即便輸入的都是數字，但DOM API 取出的時候會是以「字串」的形式出現，Vue.js 針對這類數字轉型的問題提供了 .number 的修飾子

### 2 .trim
#### 🔻 針對某個輸入框自動過濾前後的空白字元
## 📑 <font color="blue"> 模板綁定</font>
#### v-text 指令渲染的結果會無視標籤內原本的內容
#### v-html 會以 html 的形式呈現，而不是文字
#### v-once 只會渲染指定的節點一次，往後不再更新
#### v-pre 顯示原本的大括號，而不是當作模板使用
:::

## 📒 事件處理
### <font color="blue">v-on 事件綁定　</font>
#### 🔻　使用方式 v-on:[事件名稱]="運算式"

---

### <font color="blue">v-on 與 event 物件</font>
#### 🔻　v-on 觸發事件時，預設會將 event 物件當作參數傳入，在模板中可以指定傳入 $event 來指定 event 物件



---

### <font color="blue">v-on 與修飾子</font>

#### .stop　用來阻擋事件冒泡，click 事件就不會向外層傳遞，使用方法　@click.stop
#### .prevent　用來阻擋元素的預設行為
#### .capture　用來指定事件以捕獲 (capturing) 的形式來觸發
#### .self　只會觸發元素自己的事件行為，由子層元素傳遞來的事件則不會觸發
#### .once　讓指定的事件只會觸發一次
#### .passive　告訴瀏覽器這個事件處理器會不會呼叫　event.preventDefault 來停止瀏覽器的原生行為

---

### <font color="blue">鍵盤修飾子</font>
#### 🔻 可以針對需要判斷的按鍵來進行不同的動作
#### .enter / .tab / .delete (包含 del 與 backspace 鍵)
#### .esc / .space
#### .up / .down / .left / .right
#### .ctrl / .alt / .shift
#### .meta
### <font color="blue">.exact 精確判斷</font>
#### 🔻 只有在按下指定指定按鍵才會執行，被用來作為系統按鍵的各種組合熱鍵判斷使用
### <font color="blue">滑鼠修飾子</font>
#### .left / .right / .middle
#### 🔻 用來提供滑鼠按鍵的點擊判斷

---
### <font color="blue">條件判斷</font>
v-show
truthy 就顯示， falsy 則隱藏
v-if
值為 falsy 時，元素會直接被移除
## <font color="#FF0000">持續更新中...</font>