Article Directory
1. Key Refinement
- Plug-in
- Vue.use
- Pass in a function or an object containing the install method
- Extend the function of Vue, Vue instance (component instance)
- mixin
- Vue.use
2. Reference
In fact, the routing and state management that will be described later will all use plug-ins, which are most likely to be used in the development process.
The plug-in is actually very simple, the purpose is to expand the vuefunction, and provide a regular way of writing to expand vuethe function.
Components are Vueinstances, Vuein fact, the essence is a constructor.
We ourselves can give Vuecomponent extensions (not through a plug-in prototypeadditional under).
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
Branch： branch04commit description: a1.52 (example01-1-extended function under proptotype of vue)
day ： a1.52
2.2 example01-2
You can call the extended method directly.
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
Branch： branch04commit description: a1.53 (example01-2-call the extended function under proptotype of vue)
day ： a1.53
The above extensions are more random. It is Vuerecommended that if we extend it, it is best to follow its specifications, which is to Vuewrite plug-ins.
3. Plugins
It is often used to plug vuea way to provide extended functionality
- To
Vueadd properties and methods - To
Vue 实例add properties and methods - Add global resources: instructions, filters, components, etc.
- Add configuration options
4. Install the plugin
Similar koato the user registration middleware, the plug-in is actually a function, and the usemethod of use is actually to call the function.
By global method Vue.use()using plug-ins. It needs to call new Vue()to complete before starting the application.
Vue.use(插件);
If the plug is an object, it must provide a installmethod.
If the plug is a function, it will be as a installmethod.
installWhen the method is called, it will be Vuepassed as a parameter.
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. Examples
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);
}
});
Modify
prototypemodifies the wholeVueprototype chain
Another way
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
vuePackaged into a js file for writing plug-ins
vueProvide a usemethod, this is a bit like the React-Reduxmiddleware we learned before.
A plug-in is actually a function we wrote. Pass the function into the usemethod (equivalent to registering a plug-in), and it will execute this function. We can extend the function in this function and pass it Vueas a parameter.
\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
Branch： branch04commit description: a1.54 (example02-1-registered plug-in)
day ： a1.54
6.2 example02-2
Vue.mixin Injection component options
mixinReceiving an object, the object will be injected into the vueinstance configuration
Component has a life cycle created, mixinthe object is also a component configuration, within which we create a createdlife cycle, it will be injected into the Vuemiddle, and Vuethe createdlife cycle phases are combined, but it is not covered.
That is, the plug-in configuration object is merged into the configuration options of the component.
Note that it is not a coverage, but there are multiple, and the options mixed in here are better than the life cycle of the component itself (the plugin will execute first).
Therefore created, many things can be done in the function, such as createdadding a function to each plug- in, which has a higher priority than the original component.
In fact, the routes learned later are registered using this mechanism.
\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
Branch： branch04commit description: a1.55 (example02-2-injection component option)
day ： a1.55
(To be added later)