美文网首页Vue
vue-api-资源

vue-api-资源

作者: 第三人称i | 来源:发表于2018-12-01 11:59 被阅读0次

    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>
    

    相关文章

      网友评论

        本文标题:vue-api-资源

        本文链接:https://www.haomeiwen.com/subject/jsilcqtx.html