記事ディレクトリ
1.キーの改良
- プラグイン
- Vue.use
- installメソッドを含む関数またはオブジェクトを渡します
- Vue、Vueインスタンス（コンポーネントインスタンス）の機能を拡張します
- 混入します
- Vue.use
2. 引例
実際、後で説明するルーティングと状態管理はすべて、開発プロセスで使用される可能性が最も高いプラグインを使用します。
プラグインは実際には非常に単純であり、目的はvue関数を拡張し、関数を拡張するための通常の記述方法を提供することvueです。
コンポーネントはVueインスタンスでありVue、実際、本質はコンストラクターです。
私たち自身がVueコンポーネントの拡張機能を提供できます（プラグインをprototype追加することはできません）。
2.1 example01-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.prototype.getName = function() {
console.log('abcd');
};
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
}
}
});
</script>
</body>
</html>
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.52ブランチ：branch04コミットの説明：a1.52（example01-1-vueのプロトタイプの下で拡張された関数）
日：a1.52
2.2 example01-2
拡張メソッドを直接呼び出すことができます。
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.53ブランチ：branch04コミットの説明：a1.53（example01-2-vueのプロトタイプで拡張関数を呼び出す）
日：a1.53
上記の拡張はよりランダムです。Vue拡張する場合は、その仕様に従うこと、つまりVueプラグインを作成することをお勧めします。
3.プラグイン
vue拡張機能を提供する方法をプラグインするためによく使用されます
Vueプロパティとメソッドを追加するにはVue 实例プロパティとメソッドを追加するには- グローバルリソースを追加します：命令、フィルター、コンポーネントなど。
- 構成オプションを追加する
4.プラグインをインストールします
koaユーザー登録ミドルウェアと同様に、プラグインは実際には関数であり、使用use方法は実際には関数を呼び出すことです。
Vue.use()プラグインを使用したグローバルな方法による。new Vue()アプリケーションを開始する前に、を呼び出して完了する必要があります。
Vue.use(插件);
プラグがオブジェクトの場合、installメソッドを提供する必要があります。
プラグが機能の場合は、installメソッドとして使用されます。
installメソッドが呼び出されると、Vueパラメーターとして渡されます。
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) {
// 逻辑...
}
}
5.例
axios
https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
function http(_Vue, options) {
_Vue.prototype.$http = axios;
}
Vue.use(http);
// or
function http(_Vue, options) {
_Vue.prototype.$http = adaptor.http;
}
Vue.use(http, {
adaptor: axios});
new Vue({
el: '#app',
data: {
},
async created() {
// let rs = await axios({
// method: 'post',
// url: 'https://api.apiopen.top/musicRankings'
// });
// console.log(rs);
let rs = await this.$http({
method: 'post',
url: 'https://api.apiopen.top/musicRankings'
});
console.log(rs);
}
});
変更
prototypeはVueプロトタイプチェーン全体を変更します
別の方法
function http(_Vue) {
_Vue.mixin({
beforeCreate() {
if ( this.$options.adaptor ) {
this.$http = this.$options.adaptor;
}
if ( this.$options.parent && this.$options.parent.$http ) {
this.$http = this.$options.parent.$http;
}
}
});
}
Vue.use(http);
new Vue({
el: '#app',
adaptor: axios,
components: {
'my-component': myComponent
}
})
6. example02
6.1 example02-1
vueプラグインを作成するためのjsファイルにパッケージ化
vueuseメソッドを提供します。これは、React-Redux以前に学習したミドルウェアに少し似ています。
プラグインは、実際には私たちが作成した関数です。useメソッドに関数を渡すと（プラグインの登録に相当）、この関数が実行されます。この関数で関数を拡張しVueて、パラメーターとして渡すことができます。
\ js \ me.js
// Vue.use 使用，会执行插件函数，同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
}
Plugin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.54ブランチ：branch04コミットの説明：a1.54（example02-1-登録済みプラグイン）
日：a1.54
6.2 example02-2
Vue.mixin インジェクションコンポーネントオプション
mixinオブジェクトを受信すると、オブジェクトはvueインスタンス構成に挿入されます
コンポーネントにはライフサイクルがcreatedありmixin、オブジェクトもコンポーネント構成であり、その中でcreatedライフサイクルを作成し、Vue中間に注入しVue、createdライフサイクルフェーズを組み合わせますが、カバーされていません。
つまり、プラグイン構成オブジェクトは、コンポーネントの構成オプションにマージされます。
これはカバレッジではありませんが、複数あり、ここで混合されたオプションは、コンポーネント自体のライフサイクルよりも優れていることに注意してください（プラグインが最初に実行されます）。
したがってcreated、created元のコンポーネントよりも優先度の高い各プラグインに関数を追加するなど、関数内で多くのことを実行できます。
実際、後で学習したルートは、このメカニズムを使用して登録されます。
\ js \ me.js
// Vue.use 使用，会执行插件函数，同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
// mixin 接受一个对象，该对象会被注入到 vue 实例配置中
Vue.mixin({
created() {
console.log('me-created');
}
});
}
Plugin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
created() {
console.log('created');
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.55ブランチ：branch04コミットの説明：a1.55（example02-2-注入コンポーネントオプション）
日：a1.55
（後で追加されます）