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.随后创建你的vm

就像是游戏开挂，(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>