插件
Vue的插件功能可以整合之前所有的全局配置，也支持传参，使用起来比较强大；
Vue 的插件，本质上是一个 对象；要求这个对象中，必须包含 install() 方法；
第一步：定义一个插件文件；
pubPlugin.js （名字随便取的）
export default {
install(Vue,x,y,z){
console.log('插件就绪',x,y,z)
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,5)
})
// 全局自定义指令
Vue.directive('fbind',{
bind(element,binding){
element.value = binding.value
},
inserted(element){
element.focus()
},
update(element,binding){
element.value = binding.value
}
})
// 全局定义混入
Vue.mixin({
data(){
return{
year:2023
}
}
})
// 全局定义原型方法
Vue.prototype.hello = ()=> console.log('欢迎学习Vue！');
}
}提示1：定义插件的固定语法： install(Vue){}，所有的配置都写在这个方法里，这个方法默认参数是 Vue 构造函数，等于把整个 Vue 都给了，所以可以干什么事情；
提示2：之前学到的 过滤器、自定义指令、混入和原型方法都可以写在插件里；
第二步：在mian.js 中引入并使用；
import Vue from 'vue'
import App from './App.vue'
import pubPlugin from './pubPlugin' // 引入插件
Vue.config.productionTip = false
Vue.use(pubPlugin,100,200) // 使用插件
new Vue({
render: h => h(App),
}).$mount('#app')
提示1：引入插件的方法 import xxx from './xxx' ；
提示2：使用插件的方法 Vue.use(xxx) ，有几个插件就调用几次；
提示3：使用插件可以传参，默认第一个参数是 Vue；
第三步：在各子组件中调用插件的能力；
在子组件中分别应用插件的各项能力。
在 school.vue 中使用插件能力：
<template>
<div class="demo">
<h2>学校名称：{{ name | mySlice}}</h2>
<h2>学校地址：{{ address }}</h2>
<h2>学年：{{year}}</h2>
</div>
</template>
<script>
export default {
name: "schoolInfo",
data() {
return {
name:"51cto.com",
address:"北京",
};
}
};
</script>
提示1：在 name 上使用管道过滤器，只显示 name 的前5位字符；
提示2：使用混入属性 year ，显示学年信息；
看下效果：
提示1：插件中的 console.log 执行了，“插件就绪”；
提示2：学校名称 51cto.com 通过管道过滤器只显示了前5个：51cto
提示3：混入的属性 year 也显示了；
在组件 student.vue 中使用插件的能力：
<template>
<div class="demo">
<h2>学员名称：{{ name }}</h2>
<h2>学员年龄：{{ age }}</h2>
<input type="text" v-fbind:value="name">
<button @click="hello">点击按钮欢迎</button>
</div>
</template>
<script>
export default {
name: "studentInfo",
data() {
return {
name: "Jack",
age: 18,
}
}
};
</script>
提示1：给 input 上绑定自定义事件，自动获取焦点；
提示2：点击按钮执行 hello 方法；
看下效果：
刷新页面时，input 获取到焦点，点击按钮，输出欢迎语；
写个 plugin.js ，把若干方法整合到一起并应用全局，增强了Vue的实用性；
插件总结：
功能：用于增加Vue；
本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据；
定义插件：
对象.install = function(Vue,options){
Vue.filter(...)
Vue.directive(...)
Vue.mixin(...)
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = xxx
}引入插件：
import xxx from './xxx'
使用插件：
Vue.use(xxx)