# Vue 筆記列表
## 0. 課前章節
### 0-1. JS 必備觀念
- [JS 常見縮寫 - 語法糖(不會影響運作)](https://hackmd.io/@Shen-An/B1oIOVHFK)
- [This 的運作 - function包含哪些參數](https://hackmd.io/@Shen-An/rJCXhVrFY)
- [This 的運作 - this 的指向為何(一般狀況)](https://hackmd.io/@Shen-An/BJQQ04HKF)
- [This 的運作 - 各種運用變化](https://hackmd.io/@Shen-An/SkgACESFY)
- [箭頭函式](https://hackmd.io/@Shen-An/ry3FOgDsF)
- [傳參考特性 - 物件,陣列,函式都是傳參考](https://hackmd.io/@Shen-An/SyhFolwjt)
- [Promise 非同步觀念](https://hackmd.io/@Shen-An/S1ZvTevoY)
- [promise 運用](https://hackmd.io/@Shen-An/HyKe1WvsK)
- [ES Module - 在瀏覽器上運行 ES 模組](https://hackmd.io/@Shen-An/Sktt1WwsF)
- [ES Module - 現行的 ES 模組使用技巧](https://hackmd.io/@Shen-An/Bk6bvWwit)
- [ES Module - 副作用（side effect）](https://hackmd.io/@Shen-An/rJKcubPoK)
### 0-2. 關注點分離
- [關注點分離 - 資料跟畫面拆分](https://hackmd.io/@Shen-An/rJQ1jeDsF)
## 1. 快速入門 Vue.js：商品後台管理介面
- [MVVM概念介紹](https://hackmd.io/@Shen-An/ByNp3WwjF)
- [Vue 指令簡介](https://hackmd.io/@Shen-An/Hkd7yHusF)
- [Vue.js 起手式 - 起手結構](https://hackmd.io/@Shen-An/r1WODuPoK)
- [Vue 中的 this 指向?](https://hackmd.io/@Shen-An/HJ0wKdwjY)
- [雙向綁定 - v-model,v-bind,v-click](https://hackmd.io/@Shen-An/S1rfhODsF)
- [將資料加入於 Vue Data - 生命週期](https://hackmd.io/@Shen-An/S1AvAuviK)
- [多筆資料渲染到畫面上 - v-for](https://hackmd.io/@Shen-An/SJ8AlFwjY)
- [編輯你的資料狀態、並增加新增按鈕](https://hackmd.io/@Shen-An/SymlzFDsY)
## 2. 指令語法全介紹｜操作畫面超容易
- [指令觀念介紹 - 有效認識Vue.js指令](https://hackmd.io/@Shen-An/SyGakSdsK)
### 2-1. 渲染畫面
- [綁定內容於畫面上 v-text](https://hackmd.io/@Shen-An/S1yNz6OoY)
- [多筆資料渲染 v-for](https://hackmd.io/@Shen-An/SJHQ4pOiY)
- [條件判斷 v-if & v-show](https://hackmd.io/@Shen-An/SJ4Y06usY)
- [HTML 屬性綁定 v-bind](https://hackmd.io/@Shen-An/rkLbeR_oK)
- [HTML 樣式綁定 v-class - CSS操作](https://hackmd.io/@Shen-An/ByKlMC_jF)
### 2-2. 資料綁定
- [v-model 與表單 - 資料雙向綁定](https://hackmd.io/@Shen-An/HJbjg5YsY)
- [v-model 修飾符](https://hackmd.io/@Shen-An/r1JGVcYit)
### 2-3. 事件觸發
- [事件觸發 v-on](https://hackmd.io/@Shen-An/HJGMScYot)
- [v-on 修飾符](https://hackmd.io/@Shen-An/H1hyt5tjK)
- [補充：v-on DOM 事件](https://hackmd.io/@Shen-An/S1A--sYjt)
## 3. Options API：方法、運算、監聽、生命週期
- [Options API 概述](https://hackmd.io/@Shen-An/rJwEIoYiF)
- [Methods 方法](https://hackmd.io/@Shen-An/HyqUYiKsK)
- [Computed 運算基礎運用](https://hackmd.io/@Shen-An/SyKmdz5oK)
- [Computed 運算之 Getter, Setter](https://hackmd.io/@Shen-An/By-_izqoF)
- [Watch 監聽](https://hackmd.io/@Shen-An/rJ2H2f9st)
- [生命週期詳解](https://hackmd.io/@Shen-An/SJWeCG5jY)
### 3-1. 補充
- [How to use Async/Await in Vue.js LifeCycle](https://hackmd.io/@Shen-An/ry8_k75it)
## 4. 元件
### 4-1. 元件
- [元件介紹](https://hackmd.io/@Shen-An/H1RqfJojY)
- [註冊元件的手法](https://hackmd.io/@Shen-An/SJzzQJooF)
- [元件樣板及綁定方式 - 樣板 = HTML](https://hackmd.io/@Shen-An/S1XxSkoot)
### 4-2. Props 由外向內
- [Props 向內層元件傳遞資料狀態 - HTML屬性](https://hackmd.io/@Shen-An/ByU2Jlsit)
- [Props 型別與驗證](https://hackmd.io/@Shen-An/ByjPFljoF)
### 4-3. Emit 傳遞事件 - 內層往外層
- [Emit 傳遞事件 - 內層往外層，事件形式](https://hackmd.io/@Shen-An/HJN0tPjiK)
- [Emits 驗證](https://hackmd.io/@Shen-An/HJ_eoDiot)
### 4-4. Slot 插巢
- [Slot 插巢](https://hackmd.io/@Shen-An/ryFGnDosK)
- [Slot Props 插巢傳遞資料狀態 - 不常用到](https://hackmd.io/@Shen-An/B1OYJOjjt)
### 4-5. Mitt 跨元件資料傳遞
- [Mitt 跨元件資料傳遞（Event Bus）](https://hackmd.io/@Shen-An/S1GJMOjot)
## 5. 進階 API
### 5-1. 延伸資源
- [進階 API 章節延伸資源](https://hackmd.io/@Shen-An/HJoc9E2jF)
### 5-2. Vue API 介紹
- [操作 DOM 元素技巧 refs](https://hackmd.io/@Shen-An/B1bkjE3st)
- [搭配 ref 操作 Bootstrap 元件](https://hackmd.io/@Shen-An/SkZto4nsK)
- [自訂元件生成位置 teleport - Vue3新增](https://hackmd.io/@Shen-An/SkYIhNhjF)
- [跨層級資料傳遞 Provide - Vue3新增](https://hackmd.io/@Shen-An/ry0LTVhjY)
- [元件直接加入 v-model](https://hackmd.io/@Shen-An/S1sE2hnjF)
- [混合元件方法 mixins](https://hackmd.io/@Shen-An/Bybjp22oF)
- [擴展元件方法 extend](https://hackmd.io/@Shen-An/SkvF0n2jt)
- [自訂義指令 directive](https://hackmd.io/@Shen-An/SJW4Ja2sY)
- [擴充插件 plugins - 外部套件引用](https://hackmd.io/@Shen-An/HkKMlphot)
### 5-3. 外部套件
- [表單驗證套件 vee-validation](https://hackmd.io/@Shen-An/SyVoW6hjF)
### 5-4. 額外補充
- [HTML5 新增的 input 事件](https://hackmd.io/@Shen-An/S1qtfa2oF)
## 6. 開發問題解決
- [[Vue] 同時使用`@click`跟`v-model`造成監聽錯誤](https://hackmd.io/70A9TGbBROOr_GBMOZDcpg)
## 部屬網頁到 GitHub Pages
- [Vuejs部屬GitHub Pages](https://hsiangfeng.github.io/vue/20190513/948497494/)
- [一個指令快速部署 Vue Cli 到 GitHub Pages](https://github.com/hsiangfeng/vueDeploySH)[target=_blank]
- [一個指令快速部署 Vue Cli 到 GitHub Pages](https://hsiangfeng.github.io/vue/20200214/1055437216/)
{"metaMigratedAt":"2023-06-16T15:36:05.325Z","metaMigratedFrom":"YAML","title":"Vue 筆記列表","breaks":true,"contributors":"[{\"id\":\"38765108-04ef-462e-bf0c-ad13f87a4aa4\",\"add\":4575,\"del\":403}]"}