vue-api-资源

directives 自定义 指令

<!-- 
详情：
    操作底层的DOM元素，实现对一些DOM元素的操作
-->
<script>
    // 局部自定义 指令
    export default {
        directives: {
            // 定义一个 v-changeColor {{ name }}
            changeColor: {
                // 指令内部钩子函数

                // 指令第一次绑定到元素时调用触发  (相似于 => vue实例 created)
                bind(el, binding, vnode){
                    console.log('bind');
                },
                // 被绑定元素插入父节点时调用 (相似于 => vue实例 mounted);
                inserted(el, binding, vnode){
                    console.log('inserted');
                    console.dir('el', el);
                    console.log('binding', binding);
                },
                // 所在组件的 VNode 更新时调用 (相似于 => vue实例 beforeUpdate);
                update(el, binding, vnode, oldVnode){
                    console.log('update');
                    console.log('oldVnode', oldVnode);
                },
                // 指令所在组件的 VNode 及其子 VNode 全部更新后调用 (相似于 => vue实例 updated);
                componentUpdated(el, binding, vnode, oldVnode){
                    console.log('componentUpdated');
                },
                // 只调用一次，指令与元素解绑时调用。 (相似于 => vue实例 destroyed);
                unbind(el, binding, vnode){
                    console.log('unbind');
                }
            }
        } 
    }
</script>

<script>
    // 单独 js文件
    import Vue from "vue";

    const changeColor = Vue.directive('changeColor', {         
        // 与局部指令钩子函数一致
        inserted(el, binding){
            console.dir('Dom', el);
        }
    })

    export default {
        changeColor
    }

    // !注意 这里 directive 不加 's' 

    // webpack vue-cli main.js ==================

    // 引入全局自定义指令

    import $directive from './directive.js'

    Vue.use($directive);

</script>

// 钩子函数参数 详情
* el: 指令所绑定的元素，可以用来直接操作 DOM 

* binding: 一个对象，包含以下属性

    . name: 指令名，不包括 v- 前缀。
    . value: 指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    . oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用.
    . expression: 字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"
    . arg: 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"
    . modifiers: 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

* vnode: Vue 编译生成的虚拟节点 (!!!暂停不考虑了解)

* oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

filters 过滤器 (管道)

<!--
 详情：
    用于一些常见的文本格式化
-->

<!-- 局部 过滤器 -->
<template>
    <div>
        <span v-for="item in DataList">{{ item.Title | madiaTypeFilter(item.year) }}</span>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                DataList: [
                    { Title: '没有梦想', year: 2018 },
                    { Title: '何必留下', year: 2019 }
                ]
            }
        },
        // 过滤器可以接受其他参数,默认的value 参数 永远都是 过滤的值!!!
        filters: {
            // 定义一个过滤器  madiaTypeFilter {{ name }}
            madiaTypeFilter(value, year){
                console.log('过滤器参数传入',year);

                let data = 'value' + value;

                return data;
            }
        }
    }
</script>

<!-- 全局过滤器 -->
<script>
    // 单独 js 文件
    import Vue from "vue";

    const dateTime = Vue.filter('dateTime', (value) => {
        return value + 11;
    })

    export default {
        dateTime
    }

    // webpack vue-cli main.js ==================

    // 引入全局过滤器

    import $filters from "./filters.js"

    Vue.use($filters);
    
</script>