Vue mixin(混入) && 插件

 1 # mixin(混入)
 2 #    功能：可以把多个组件公用的配置提取成一个混入对象
 3 #    使用方法：
 4 #        第一步：{data(){return {...}}, methods:{...},...}
 5 #        第二步：1.全局混入：Vue.mixin(xxx)、2.局部混入：mixins:[xxx]
 6
 7 # Vue 插件
 8 #    第一步：定义插件  plugins.js
 9 export default {
10     install(Vue, a, b, c){  // a, b, c为Vue.use()时传入的参数
11         console.log(a, b, c)
12         // 定义全局过滤器
13         Vue.filter('mySlice', function(value){
14             return value.slice(0,4)
15         });
16
17         // 定义全局指令
18         Vue.directive('big-number',{
19             bind(element, binding){
20                 element.value = binding.value;
21             },
22             inserted(element, binding){
23                 element.setFouse();
24             },
25             update(element, binding){
26                 element.value = binding.value;
27             }
28         })
29
30         // 定义混入
31         Vue.mixin({...}); // 全局混入
32         Vue.mixin({...});
33
34         // 给原型添加方法
35         Vue.prototype.hello = () =>{alert('hello a!')}
36     }
37 }
38 #    第二步：引入插件
39 Vue.use(plugins, 1, 2, 3)
40
41 # scoped样式
42     作用：让样式在局部生效，防止样式名冲突
43     写法：<style scoped>