# [ 想入門，我陪你 ] Re Vue 重頭說起｜Day 15：Plugin 與 Filter
###### tags: `Vue`、`Re:Vue 重頭說起`、`Alex 宅幹嘛`
## Plugin (12:18)
Plugin 通常是增加個全域新功能在Vue身上，它沒有嚴格的範疇，以下是範例：
1. Add some global methods or properties. e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element)
1. Add one or more global assets: directives/filters/transitions etc. e.g. [vue-touch](https://github.com/vuejs/vue-touch)
1. Add some component options by global mixin. e.g. [vue-router](https://github.com/vuejs/vue-router)(增加一些component功能 Ex:vue-router/router-link/router-view/beforeRouterEnter)
1. Add some Vue instance methods by attaching them to Vue.prototype.(作在實體上的功能)
1. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. [vue-router](https://github.com/vuejs/vue-router)(可以在Vue塞一些功能，Ex: vue-router 的 go() / replace() / push())
> vue-touch 套件增加touch事件，可以幫手機觸控做事件偵聽
### Using a Plugin 如何用 Plugin (19:55)
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Day 15</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
// 先定義Plugin如何install
// 參數1: Vue 實體 參數2: 設定
// 可以透過 Vue 呼叫 Vue實體的功能，或在身上做事情
const MyPlugin {
install: function (Vue, options) {
console.log(Vue, options)
}
}
Vue.use(MyPlugin, {test: true})
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
### Writing a Plugin 如何做 Plugin
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Day 15</title>
</head>
<body>
<div id="app">
<button @click="log('click')">
Click me
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
// 可以在裡面做 method / directive / mixin ..等，並統整觸法
const LogPlugin {
install: function (Vue, options) {
// 1. add global method or property
// 2. add a global asset (Ex: directive)
// 3. inject some component options
// 4. add an instance method
Vue.mixin({
methods: {
log: (...arg){
console.log(...arg)
}
}
})
}
}
Vue.use(LogPlugin, {test: true})
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
## Filters (46:00)
重點是在處理文字的格式，Filter 通常使用在兩個地方 **mustache interpolations and v-bind expressions**
Filters 該放在 JavaScript expression 後， 代表 “pipe” 符號 (**|**)
```javascript=
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
```
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Day 15</title>
</head>
<body>
<div id="app">
{{ first | firstUpper }}
{{ last | firstUpper }}
{{ first + last | firstUpper }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.filter('firstUpper', function(value) {
// 單字第一個字母變大寫
return value.chatAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data() {
return {
first: 'alex',
last: 'chen',
}
}
})
</script>
</body>
</html>
```
> 類似輕量化的 computed，或是單一功能化的 methods (Ex: 文字格式的methods)
改成用一般 method 做會如何？
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Day 15</title>
</head>
<body>
<div id="app">
<p>{{ firstUpper(first) }} {{ firstUpper(last) }}</p>
<p>{{ first + last | firstUpper }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.filter('firstUpper', function(value) {
// 單字第一個字母變大寫
return value.chatAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data() {
return {
first: 'alex',
last: 'chen',
}
},
methods: {
firstUpper(value) {
return value.chatAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>
```
59:40 因為 v-bind 可以放filter，所以測試 pipe 與 filter 放在 v-html or v-text 內 => 無法執行
1:06:32 filter 是可以連續被做的
message先做filterA，再做 filterB
```javascript=
{{ message | filterA | filterB }}
```
1:07:00 Filters are JavaScript functions => 所以可以設計多個參數
```javascript=
// 參數1: 字串 參數2: 變數
{{ message | filterA('arg1', arg2) }}
```
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Day 15</title>
</head>
<body>
<div id="app">
<p>{{ first + last | firstUpper('aaa', 123) }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.filter('firstUpper', function(value, ...arg) {
console.log(value, ...arg)
return value.chatAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data() {
return {
first: 'alex',
last: 'chen',
}
},
})
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet