Vue mixin(混入) && 插件

# mixin(混入)
#    功能：可以把多个组件公用的配置提取成一个混入对象
#    使用方法：
#        第一步：{data(){return {...}}, methods:{...},...}
#        第二步：1.全局混入：Vue.mixin(xxx)、2.局部混入：mixins:[xxx]

# Vue 插件
#    第一步：定义插件  plugins.js
export default {
    install(Vue, a, b, c){  // a, b, c为Vue.use()时传入的参数
        console.log(a, b, c)
        // 定义全局过滤器
        Vue.filter('mySlice', function(value){
            return value.slice(0,4)
        });

        // 定义全局指令
        Vue.directive('big-number',{ 
            bind(element, binding){
                element.value = binding.value;
            },
            inserted(element, binding){
                element.setFouse();
            },
            update(element, binding){
                element.value = binding.value;
            }
        })

        // 定义混入
        Vue.mixin({...}); // 全局混入
        Vue.mixin({...});

        // 给原型添加方法
        Vue.prototype.hello = () =>{alert('hello a!')}
    }
}
#    第二步：引入插件
Vue.use(plugins, 1, 2, 3)

# scoped样式
    作用：让样式在局部生效，防止样式名冲突
    写法：<style scoped>