vue学习篇--08自定义指令 自定义过滤器 自定义插件 混入的使用

自定义指令

1.全局指令

1. main.js:  实现拖拽
    // 自定义全局指令
    // 参数1:指令的名字
    // 参数2:指令的实现函数
    // Vue.directive('color', (el, binding, vnode, oldvnode)=>{
    //   console.log('color指令调用了');
    //   // console.log({el, binding, vnode, oldvnode});
    //   el.style.background = binding.value;
    // })


    //实现拖拽
    Vue.directive('drag', (el, binding)=>{
    console.log(el, binding);
    //取得修饰符
    // 判断哪个方向需要拖拽
    let {x, y} = binding.modifiers;
    if(!x && !y){
        x = true;
        y = true;
    }

    el.style.position = 'relative';

    let offsetX = 0, offsetY = 0;
    //实现拖拽
    el.onmousedown = function(ev){
        let startX = ev.clientX - offsetX;
        let startY = ev.clientY - offsetY;
        document.onmousemove = function(ev){
        //计算偏移量
        offsetX = ev.clientX - startX;
        offsetY = ev.clientY - startY;

        //根据x,y条件，进行对应方向的偏移
        if(x){
            el.style.left = offsetX + 'px';
        }
        if(y){
            el.style.top = offsetY + 'px';
        }   
        }
        document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
        }
    }
    })


    new Vue({
    render: h => h(App)
    }).$mount('#app')

2.局部指令

1. App.vue:
    import Box from './Box'
    export default {
        components: {
            Box
        },
        //局部指令
        directives: {
            color(el, binding){
            el.style.background = binding.value;
            el.style.color = '#fff';
            }
        }
    }

自定义过滤器

过滤器：js中的数据是一种格式，但需要以另一种格式显示在dom结构上，但又不能修改原始数据格式，所以可以使用过滤器对原始数据格式进行处理，
过滤器不会破坏原生在js中的数据，只会操作显示在dom中的数据

自定义过滤器：参数1：过滤器名字   参数2：过滤器实现的函数
Vue.filter('test',(value)=>{
    console.log('test过滤器调用了',value)
    var arr = value.split('').reverse().join('')
    console.log(arr)
})
调用过滤器：
    文本使用：{{message | test}}   绑定属性：v-bind:title='value | test'
    只有这两种方法可以使用过滤器，其他的情况都不能使用

局部过滤器：保留几位小数点
    // 局部声明过滤器
    filters: {
        numFilter(value, num){
        return value.toFixed(num);
        }
    },

    <p>{{number | numFilter(5)}}</p>
    <p>{{number | numFilter(2)}}</p>

混入

混入：给vue实例或组件混入一个配置项
vue配置项有：props,data,methods,computed,watch,components,directives,filter，生命周期方法

 - main.js:
    // 混入：给vue实例或组件混入一个配置项

    // 全局设置混入
    Vue.mixin({
        data(){
            return {
                name: '我的项目'
                }
        }
    });

    const mixin = {
        data: {
            message: 'hello mixin'
        },
        methods: {
            printAction(){
            console.log('mixin 的 printAction方法执行了');
            }
        }
    };
    const vm = new Vue({
    render: h => h(App),
    mixins: [mixin]
    }).$mount('#app');

    console.log(vm.message);
    console.log(vm.name);
    vm.printAction();

1.混入和实例的执行顺序

• 组件或实例 和 mixin混入 同时设置了相同的值，取组件或实例自身的配置值
• 如果有多个mixins时，后面的值会把前面的值覆盖。取后面的mixin的值
• 组件或实例 和 多个mixin混入 同时设置生命周期方法时，
  每个生命周期方法都执行，执行顺序按混入设置数组顺序执行，之后执行实例或组件自身的生命周期方法

自定义插件

1. plugin/index.js:
    export default {
        install(Vue){
            console.log('install方法调用了');
            //设置Vue的全局方法
            Vue.func = function(){

            }
            // 设置vue全局组件
            // Vue.component('组件名字', 组件内容)
            // 设置vue全局指令
            Vue.directive('指令名字', ()=>{

            })

            // 设置全局的过滤器
            Vue.filter('过滤器名字', ()=>{

            })

            // 设置每个组件和实例都能访问到的数据
            Vue.prototype.$name = '我的插件';

            // 设置全局的混入
            Vue.mixin({

            });
        }
    }

// vue-router 插件    在全局都能使用组件 router-view   router-link
// 使用了路由之后，在组件中可以访问到this.$router    this.$route

2. main.js:
    import Vue from 'vue'
    import App from './App'
    import MyPlugin from './plugin'
    Vue.use(MyPlugin);//让Vue获得插件内部扩展的功能

    // 在创建vue实例对象时，在实例对象内部就可以使用上面use方法扩展的功能
    new Vue({
        el: '#app',
        render: h=>h(App)
    })