Vue.js 插件
1.前言
vue的插件其实通过操作Vue这个对象，为其扩展新的功能。例如：
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
2.插件的封装
- 要拿到Vue这个对象，不同的模式有不一样的方法:
- 在普通模式中，Vue框架以script标签的形式引入之后，Vue作为全局变量，插件直接对他进行操作即可。
- 在脚手架模式中，各个模块是相互独立的，其他模块无法直接读取Vue这个对象。虽然可以通过import方式引入Vue进行操作，这是这样不符合规范。
- 实际的做法是：定义一个函数，在函数内部对Vue进行操作。插件定义一个install方法，当执行Vue.use(plugin) 是，则执行这个install方法
- 如果plugin是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。
- 该方法需要在调用 new Vue() 之前被调用。
- 当 install 方法被同一个插件多次调用，插件将只会被安装一次。
3.简单的实例：编写一个添加自定义指令和过滤器的插件
- 非模块化模式：
//确保在这之前已经通过script标签引入了Vue
//添加全局的自定义指令 全部转换成大写
Vue.directive('upper-text',function(el,binding){
el.innerText = binding.value.toUpperCase();
})
//添加全局过滤器 全部转换成小写
Vue.filter('toLowerCase',function(val){
return val.toLowerCase()
})
- 模块化模式：
//1.创建一个对象
const myPlugin = {}
//为其添加install方法,接收Vue这个参数
myPlugin.install = function(Vue){
//测试
console.log('install方法执行了')
//添加全局的自定义指令
Vue.directive('upper-text',function(el,binding){
el.innerText = binding.value.toUpperCase();
})
//添加全局过滤器
Vue.filter('toLowerCase',function(val){
return val.toLowerCase()
})
}
//暴漏该对象
export default myPlugin
//入口文件
import Vue from 'vue'
import App from './App'
import myPlugin from './plugin/myPlugin.js'
////执行myPlugin.install(Vue)
Vue.use(myPlugin)
- 使用插件
<body>
<div id="app">
<!-- 默认 -->
<p v-html="msg"></p>
<!-- 使用插件的自定义指令 -->
<p v-upper-text="msg"></p>
<!-- 使用过滤器 -->
<p>{{msg | toLowerCase}}</p>
</div>
</body>
执行结果：
<div id="app">
<p>Good Life</p>
<p>GOOD LIFE</p>
<p>good life</p>
</div>
4.添加实例方法
- 在脚手架项目中，组件要用axios时，需要在组件中重新引用，如果在入口js文件中引入一次axios，并挂在到Vue原型链中，那么后面所有的组件都能访问这个对象，无需再次引用。
import Vue from 'vue'
//引入axios
import axios from 'axios'
//创建实例
const ajax = axios.create({
baseURL: 'https://api.example.com'
})
//将实例挂在到原型链中
Vue.prototype.$ajax = ajax
app.vue
<script>
export default {
data(){
return {
msg:'Good Life'
}
},
created(){
this.$ajax.get('/api/getMsg').then(res => {
console.log(err)
}).catch(err => {
console.log(err)
})
}
}
</script>
