---
# System prepended metadata

title: '[ 想入門，我陪你 ] Re Vue 重頭說起｜Day 15：Plugin 與 Filter'
tags: [Alex 宅幹嘛, Vue, 'Re:Vue 重頭說起']

---

# [ 想入門，我陪你 ] 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>
```
![](https://i.imgur.com/Nver72a.jpg)

### 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>
```

![](https://i.imgur.com/lqXjgTN.png)


## 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>
```
![](https://i.imgur.com/nCOiTfH.png)

> 類似輕量化的 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>
```
![](https://i.imgur.com/PTDRTuu.png)

