Plug-in
Verzeichnis
Plug-Ins sind normalerweise gewohnt Vue fügt globale Funktionalität hinzu. Es gibt keine strengen Einschränkungen hinsichtlich des Funktionsumfangs von Plug-Ins – grundsätzlich gibt es folgende Typen:
1. Globale Methoden oder Attribute hinzufügen. Zum Beispiel: vue-custom-element
2. Fügen Sie globale Ressourcen hinzu: Anweisungen/Filter/Übergänge usw. Wie zum Beispiel vue-touch
3. Fügen Sie einige Komponentenoptionen durch globales Mischen hinzu. Wie zum Beispiel vue-router
4. Fügen Sie Vue-Instanzmethoden hinzu, indem Sie sie zu Vue.prototype hinzufügen.
5. Eine Bibliothek, die ihre eigene API und eine oder mehrere der oben genannten Funktionen bereitstellt. Beispielsweise verwendet vue-router
das Plugin
über die globale Methode Vue.use() Plugin verwenden. Es muss abgeschlossen sein, bevor Sie new Vue() aufrufen, um die Anwendung zu starten:
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})Sie können auch ein optionales Optionsobjekt übergeben:
Vue.use(MyPlugin, { someOption: true })Vue.use verhindert automatisch die Mehrfachregistrierung des Zu diesem Zeitpunkt wird das Plug-in nur einmal registriert, auch wenn es mehrmals aufgerufen wird.
Einige offiziell von Vue.js bereitgestellte Plug-Ins (z. B. vue-router) rufen automatisch Vue.use() auf, wenn sie erkennen, dass Vue eine zugängliche globale Variable ist. Allerdings sollten Sie in einer Modulumgebung wie CommonJS immer Vue.use() explizit aufrufen:
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)awesome-vue ist eine Sammlung einer großen Sammlung von von der Community beigesteuerten Plugins und Bibliotheken.
Plugins entwickeln
Vue.js-Plugins sollten eine install-Methode verfügbar machen. Der erste Parameter dieser Methode ist der Konstruktor Vue und der zweite Parameter ist ein optionales Optionsobjekt:
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
