vueプラグインの追加
1931 ワード
vueプラグイン
概要
プラグインは通常、Vueにグローバル機能を追加します.
使用方法
全般的なプロセス:宣言プラグイン-書き込みプラグイン-登録プラグイン-プラグインの使用
プラグインの宣言
まずjsファイルを書きます.基本的な内容は以下の通りです.
Vueプラグインには、
書き込みプラグイン
公式ドキュメントに従って、プラグインを書くには4つの方法があります.
ここで最も一般的な4つ目は、インスタンスの追加方法です.コードは次のとおりです.
プラグインの登録
キー:導入後にVueを使用する.use()はプラグインを登録します
プラグインの使用
1つのコンポーネントで:
原文:http://blog.csdn.net/qq200046...
概要
プラグインは通常、Vueにグローバル機能を追加します.
使用方法
全般的なプロセス:宣言プラグイン-書き込みプラグイン-登録プラグイン-プラグインの使用
プラグインの宣言
まずjsファイルを書きます.基本的な内容は以下の通りです.
export default {
install(Vue, options) {
//
//
}
}
Vueプラグインには、
install
という公開方法があります.この方法の第1のパラメータはVueコンストラクタであり、第2のパラメータはオプションのオプションオブジェクトです.書き込みプラグイン
公式ドキュメントに従って、プラグインを書くには4つの方法があります.
// 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) {
// ...
}
ここで最も一般的な4つ目は、インスタンスの追加方法です.コードは次のとおりです.
// , , null
export default {
install(Vue, options) {
Vue.prototype.doubleNum = function(num) {
if (typeof num === 'number' && !isNaN(Number(num))) {
return num * 2;
} else {
return null;
}
}
}
}
プラグインの登録
//main.js
import Vue from 'vue'
import service from './service.js'
Vue.use(service)
キー:導入後にVueを使用する.use()はプラグインを登録します
プラグインの使用
1つのコンポーネントで:
{{num}}
export default{
data(){
return {
num: 1
}
},
methods: {
double: function () {
// this.doubleNumber()
this.num = this.doubleNumber(this.num);
}
}
}
原文:http://blog.csdn.net/qq200046...