---
tags: Vue 實戰班
---

# 第五週目標：

- 主線任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2F7dKdSP54Qc6Ao9dopgnEBA
- 團隊任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2Fm9ZZN6bSQP2JL75ufVnS7g

## 本週三大重點：

- Vue Filter
- Vue 原型觀念與 $refs
- Vue 的插件

## Filter

Vue 除了 Component 以外，還有另外兩個[兄弟](https://cn.vuejs.org/v2/api/#选项-资源)：
- Component
- Directive: 稱為指令，像是 v-model, v-for 這類型都是，官方也允許開發者自訂指令
- 可參考：https://cn.vuejs.org/v2/api/#Vue-directive
- Filter: 過濾器，概念源自於 Angular.js，可以在資料呈現前改變資料

呈現結果參考：

{{ message | filterA }}

## 原型概念

這段介紹的概念影響：
- Vue 的語法藏在哪邊
- 區域屬性與全域方法
- 套件裝在哪？

## refs

- 不需要透過 JS 直接選用畫面上的物件

## 外部插件

常見的套件載入方式：
1. 註冊為全域元件
2. 使用 use 加載為 Vue 的原型方法（或者直接使用 CDN 帶入函式）

元件介紹：
- Vue loading
- VeeValidate

表單觀念介紹：https://developers.google.com/web/fundamentals/design-and-ux/input/forms?hl=zh-tw