內容提要:
- 使用一個插件
- 如何寫一個插件
插件常常爲Vue添加全局級功能。插件沒有嚴格定義的作用域 - 通常有幾種類型的插件:
- 添加一些全局的方法或屬性。例如: vue-custom-element
- 添加一個或多個全局資源:指令/過濾器/過渡 等等. 例如:vue-touch
- 通過全局mixin添加一些全局組件項。例如。vue-router
- 添加一些Vue實例方法,通過把他們添加到Vue.prototype上實現。
- 一個提供自有API的庫,同時注入上面提到的一些功能的組合。例如:vue-router
使用一個插件
通過調用Vue.use()
全局方法使用插件。做這個之前你需要通過new Vue()
啓動你的應用。
// calls 'MyPlugin.install(Vue)'
Vue.use(MyPlugin)
new Vue({
// ... options
})
你也可以傳入一些選項對象:
Vue.use(MyPlugin, { someOption:true })
Vue.use
會自動阻止你使用相同的組件註冊多次,所以當你調用相同的組件多次的時候只會安裝一次。
如果Vue作爲一個全局變量是可用的,那麼通過Vue.js官方提供的插件將自動調用Vue.use()
,例如vue-router
,然而,例如在CommonJS的模塊環境中,你總是需要顯式的調用Vue.use()
:
// 當你通過Browserify 或 Webpack 使用CommonJS
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘記調用這個
Vue.use(VueRouter)
awesome-vue收集類大量社區貢獻的插件和庫。
寫一個插件
一個Vue.js 插件應該提供一個install
方法。這個方法的第一個參數是Vue的構造器。連同其他可能的操作:
MyPlugin.install = function (Vue, options) {
// 1.增加一個全局方法或屬性
Vue.myGlobalMehtod = function () {
// 一些邏輯...
}
// 添加一個全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldValue) {
// 一些邏輯...
}
})
// 3. 注入一些組件選項對象
Vue.mixin({
created: function () {
// some logic ...
}
...
})
// 4.添加一個實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// some logic ...
}
}