Alex宅幹嘛_ReVue_Day15筆記_Plugin和Filter

Plugins

它是用來增加全域性的方法給 Vue 使用的功能。
通常會將常用的方法之類的東西包在 plugin 裡面，再一包一次塞給 Vue 用。

Using a Plugin

當我們要引入一個外掛的 plugin 的時候，我們要記得用 Vue.use() 來引入這個套件，才能在專案中使用這個套件。那也要記得，要在 new Vue 之前使用 Vue.use()。
ex:

Vue.use(MyPlugin)

new Vue({
  //... options
})

使用 Vue.use() 的時機

有一些由官方所提供的 plugin 像是 vue-router，就會自動的被加入 Vue.use() 來引入他們，不需要我們在自己寫上去，但要記得，這種情況，必須在你的 Vue 是一個全域變數的情況下喔。
所以，像是我們在一個小檔案中，並沒有用 vue-cli 這種套件管理的狀態下，通常在我們引入 vue-router 的 cdn 之後，就會自動地為我們加上 Vue.use() 了。
但是，在模組化的環境下(像是有使用 vue-cli 管理套件來將專案切割成各種模組的情況) ，就算我們引入以上這種官方的套件，也是必須要加入 Vue.use() 來引入它們。
ex:

var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)   // 要使用 Vue.use() 來引入

Writing a Plugin

任一個 plugin 都應要有一個 install function。這個 install function 會在 Vue 物件的建構式中被當作第一個參數呼叫。
我們可以在這個 install function 中寫入我們希望在這個 plugin 定義的內容。

以上這個範例，就是加入一個自訂義的 plugin 然後裡面包了一個方法，可以調用 Vue 物件的 show 成員屬性的值。

Filters

它會被用來處理文字的內容。
filters 可以被在以下兩種地方:
一個是 mustache interpolations，也就是 template 裡面，像 {{ price | currency }} 這樣子。
另一個可以用在 v-bind 的表達式，像<div v-bind:id="rawId | upperCase"></div>中。