1、功能：用于增强Vue

2、本质：包含install方法的一个对象，install的第一个参数的Vue，第二个及以后的参数是插件使用这传递的数据。

定义插件：
    对象.install = function(Vue,options){
        //1.添加全局过滤器
        Vue.filter(....)
        //2.添加全局指令
        Vue.directive(....)
        //3.配置全局混入（混合）
        Vue.mixin(....)
        //4.添加实例方法
        Vue.prototype.$myMethod = function(){....}
        Vue.prototype.$myProperty = xxxx
    }

3、使用插件： Vue.use()

4、代码

4.1插件定义


export default {
    install(Vue){
        // console.log('@@@install hxm',Vue)
        //1.添加全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
        //2.添加全局指令
        Vue.directive('fbind', {
            //指令与元素成功绑定时
            bind(el, binding) {
                el.value = binding.value
            },
            //指令所在元素成功插入界面时
            inserted(el, binding) {
                el.focus()
            },
            //指令所在的模板被重新解析时
            update(el, binding) {
                el.value = binding.value
            }
        });
        //3.配置全局混入（混合）
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:200
                }
            }
        })
        //4.添加实例方法：vm和vc就都能用了
        Vue.prototype.hello =()=>{alert('你好啊')}
    }
}

4.2 插件使用


<template>
  <div>
    <h1>{{ msg }}</h1>
    <!-- 管道符使用插件中 全局过滤器 -->
    <h2>学生姓名：{{name | mySlice}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <!-- 使用插件中fbind全局指令 -->
    <input type="text" v-fbind:value="name">
    <br/>
    <br/>
    <!-- 使用全局中实例方法 -->
    <button @click="sayHi">点我测试hello方法</button>
  </div>
</template>
<script>
export default {
    name:'Student',
    data(){
        // console.log(this)   //输出的vc，包含data内的msg，以及props内的name,age,sex
        return{
            msg:'我是饥荒Boss',
            name:'猪人小鸭子',
            age:12,
            sex:'男'
        }
    },
    methods:{
        sayHi(){
            this.hello()
        }
    }
}
</script>

5、效果图