Vue当中有一个特别强大但写起来特别简单的一个东西,名字叫
插件
有什么作用?
可以帮我们去增强一下Vue
先配置好项目(自己写的话)
main.js(项目执行npm run serve后第一个进入的)
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
App.vue(管理着所有的组件的组件)
<template>
<div>
<School />
<hr />
<Student />
</div>
</template>
<script>
import School from './components/School'
import Student from './components/Student'
export default{
name: 'App',
components: {School,Student}
}
</script>
<style>
</style>
School.vue
<template>
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default{
name: 'School',
components: {},
data(){
return{
name: 'bilibili',
address: '魔都'
}
},
}
</script>
<style>
</style>
Student.vue
<template>
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}}</h2>
</div>
</template>
<script>
export default{
name: 'Student',
components: {},
data(){
return{
name: '张三',
sex: '男'
}
}
}
</script>
<style>
</style>
接下来亲手去定义一个Vue里的插件
插件的本质到底是什么?
要是函数我就写函数了(()=>{})
要是数组就去写数组了([])
Vue里的插件本质上就是一个对象,但是Vue要求这个对象里面必须包含一个方法,名字叫install
不要在自带的component里面写，在src下写,名字可以随便取，但标准一点就写plugins.js
plugins.js
const obj = {
install(){
}
}
恭喜你! 一个插件定义完了,但是你这个插件什么事都没做
让它往控制输出，看它什么时候调用
const obj = {
install(){
console.log('install')
}
}
install()一定会调,而且事Vue帮你调用,但是你这个插件没有提供任何的数据
默认暴露
const obj = {
install(){
console.log('install')
}
}
export default obj;
但是只有一个obj，所以可以直接这么写:
export default{
install(){
console.log('install')
}
}
定义完了
暴露完了
直接import使用它就可以了
这个插件的顺序问题
就像是游戏开挂，(1)先要开启挂;(2)进入游戏一样的顺序
所以在main.js里面的new Vue()之前我们必须得应用这个插件
想应用就得引入
//引入插件
import plugins from './plugins'
怎么应用插件?
Vue给我们提供了一个API,叫Vue.use()
应用插件:
//应用(使用)插件
Vue.use(plugins)
就是有人帮你调了install()方法
其实install()里面是有新参的，先把形参定义为a
export default{
install(a){
console.log('install')
console.log(a)
}
}
打印输出:
ƒ Vue (options) {
if ( true &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
a不是vm,a是vm的缔造者Vue构造函数,形参换一下
export default{
install(Vue){
console.log('install')
}
}
这里面做了太多事了:
全局过滤器(跳转测试)
export default{
install(Vue){
console.log('install')
console.log(Vue)
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
}
}
自定义指令(跳转测试)
export default{
install(Vue){
console.log('install')
console.log(Vue)
//自定义全局指令
Vue.directive('fbind',{
bind(element,binding){
element.value = binding.value
},
inserted(element){
element.focus()
},
update(element,binding){
element.value = binding.value
element.fousc()
}
})
}
}
定义混入(跳转测试)(这是全局的混入也就意味着所有的VueComponent和vm身上都有这个)
export default{
install(Vue){
console.log('install')
console.log(Vue)
//定义混入
Vue.mixin({
data(){
return{
x: 100,
y: 200
}
},
})
}
}
给Vue原型上添加一个方法(跳转测试)
export default{
install(Vue){
console.log('install')
console.log(Vue)
//给Vue原型上添加一个方法(vm和VueComponent都能用了)
//往原型上放一个hello
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
测试过滤器 > School.vue
<template>
<div>
<h2>学校名称:{{name | mySlice}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default{
name: 'School',
components: {},
data(){
return{
name: 'bilibili YYDS',
address: '魔都'
}
},
}
</script>
<style>
</style>
测试自定义指令 > Student.vue
<template>
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default{
name: 'Student',
components: {},
data(){
return{
name: '张三',
sex: '男'
}
}
}
</script>
<style>
</style>
测试定义混入
//借助Vue开发者工具查看组件身上的data元素是否都有x:100,y:200
测试给Vue原型上添加一个方法 > School.vue
<template>
<div>
<h2>学校名称:{{name | mySlice}}</h2><!--这个是过滤器的-->
<h2>学校地址:{{address}}</h2>
<button @click="test">点我测试hello方法</button>
</div>
</template>
<script>
export default{
name: 'School',
components: {},
data(){
return{
name: 'bilibili YYDS',
address: '魔都'
}
},
methods: {
test(){
this.hello()
}
},
}
</script>
<style>
</style>
总结
功能: 用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件:
对象.install = function(Vue,options){
//1.添加全局过滤器
Vue.filter(…)
//2.添加一个全局指令
Vue.directive(…)
//3.配置全局混入(合)
Vue.mixin(…)
//4.添加实例方法
Vue.prototype.$myMethod = function(){…}
Vue.prototype.$myProperty = xxx
}
使用插件:Vue.use()
