Vue入门实战（Day02）

最新推荐文章于 2022-10-30 14:09:20 发布

薯条♪

最新推荐文章于 2022-10-30 14:09:20 发布

阅读量139

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_45835014/article/details/119189138

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue入门实战之基础篇

一、过滤器的使用及定义

一、过滤器的使用及定义

1.1 如何使用过滤器：

重点来咯📣

①使用场景

用于格式化内容（如：日期的格式转换、大小写的转换等）

②使用方法

{{data中数据 | 过滤器名字}}
例如：下图中{{msg | toUp}}

<body>
    <div id="app" v-cloak>
        <p>{{msg}}</p>
        <p>{{msg | toUp}}</p>
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        // 全局过滤器
        // 在newVue之前
        // 1.在newVue之前Vue.filter('过滤器名字',function(){})定义过滤器
        // 2.在过滤器函数中 实现具体数据格式处理 function(v){}--->v 当前过滤器的调用者 被处理的数据 自带参数
        // 1.在视图中使用过滤器{{msg | 过滤器名字}}
        Vue.filter('toUp', (v) => {
            // v就是msg==abc
            return v.charAt(0).toUpperCase() + v.substr(1)
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'abc'
            },
            methods: {}
        });
    </script>
</body>

1.2 过滤器的分类及串联使用

①全局过滤器

定义：
     在vue实例之前定义的过滤器是全局过滤器；定义方法是：Vue.filter(‘过滤器名字’，function（）｛｝)

具体步骤：
     ①在vue实例之前使用Vue.filter(‘过滤器名字’,function(){})(注意标点符号)
     ②在过滤器函数中实现具体的过滤方式，function(v) ;v 是指当前过滤器的调用者被处理的数据自带参数
     ③在视图中使用过滤器 {{msg | 过滤器名字}}

<body>
    <div id="app" v-cloak>
        <p>{{msg}}</p>
        <p>{{msg | toUp}}</p>
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        // 全局过滤器
        // 在newVue之前
        // 1.在newVue之前Vue.filter('过滤器名字',function(){})定义过滤器
        // 2.在过滤器函数中 实现具体数据格式处理 function(v){}--->v 当前过滤器的调用者 被处理的数据 自带参数
        // 1.在视图中使用过滤器{{msg | 过滤器名字}}
        Vue.filter('toUp', (v) => {
            // v就是msg==abc
            return v.charAt(0).toUpperCase() + v.substr(1)
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'abc'
            },
            methods: {}
        });
    </script>
</body>

②局部过滤器

定义：
     在vue实例中定义的过滤器是局部过滤器；定义方法是：filters:{function(v) { } }

具体步骤：
     ①在vue实例中使用实例 filters:{ function() { } }(注意标点符号)
     ②在过滤器函数中实现具体的过滤方式，function(v) ;v 是指当前过滤器的调用者被处理的数据自带参数
     ③在视图中使用过滤器 {{msg | 过滤器名字}}

<script>
        var vm = new Vue({
            el: '#app', 
            data: {
                msg: "abc"
            },
            filters: {
                // toUp: function () {
                //     return v.charAt(0).toUpperCase() + v.substr(1)
                // },
                toUp(v) {
                    return v.charAt(0).toUpperCase() + v.substr(1)
                }
            },
            methods: {}
        });
    </script>

③串联使用过滤器

使用方法：
{{msg | 过滤器1（v） | 过滤器2（v,y）}}

🌈过滤器是可以传递参数的哦

<body>
    <div id="app">
        <!-- 过滤器的串联使用 {{data数据 | 过滤器1 | 过滤器2}} -->
        {{money | toD |toY('元')}}
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        //过滤器1 添加美元符
        Vue.filter('toD', (v) => {
            return "$" + v
        });
        //过滤器2 添加元字
        Vue.filter('toY', (v, y) => {
            return "$" + v + y
        });
        var vm = new Vue({
            el: '#app',
            data: {
                money: 1000
            },
            methods: {}
        });
    </script>
</body>

1.3 如何自定义一个指令？(重点掌握)

①自定义指令的分类及使用

场景：适用于系统指令中没有的情况下

全局指令（整个页面适用）

定义：
在vue实例中定义的过滤器是局部过滤器；定义方法是：Vue.directive(‘指令名’,{inserted(el){}})
具体步骤：
①在vue实例之前Vue.directive(‘指令名’,{inserted(el){}})
② 在inserted(el){自定义指令的具体功能}（el是指调用该该指令的的调用者（dom元素））
③ 在视图中使用v-指令名来调

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        // 在vue实例之前Vue.directive('指令名',{inserted(el){}})
        //在inserted(el){自定义指令的具体功能}
        //在视图中使用v-指令名来调
        Vue.directive('focus', {
            inserted(el) {

                //el是指调用该指令的调用者（dom元素）
                el.focus()
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

局部指令（某一板块适用）

定义：
     在vue实例中定义的指令是局部指令器；定义方法是：directives:｛指令名: {inserted(el){
} } }key就是指令名

具体步骤：
     ①在vue实例中使用实例directives:｛指令名: {inserted(el){
} } }(注意标点符号)
     ②在函数中实现具体的指令操作，function(el) ;el 是指当前过滤器的调用者被处理的数据自带参数
     ③在视图中使用自定义指令,指令不带属性值

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            directives: {
                // key是指令名
                focus: {
                    inserted(el) {
                        el.focus()
                    }
                }
            },
            methods: {}
        });
    </script>
</body>

薯条♪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门实战（Day02）

Vue入门实战之基础篇一、过滤器的使用及定义1.1 如何使用过滤器：①使用场景②使用方法1.2 过滤器的分类及串联使用①全局过滤器②局部过滤器③串联使用过滤器1.3 如何自定义一个指令？(重点掌握)①一、过滤器的使用及定义1.1 如何使用过滤器：重点来咯????①使用场景用于格式化内容（如：日期的格式转换、大小写的转换等）②使用方法{{data中数据 | 过滤器名字}}例如：下图中{{msg | toUp}}<body> <div id="app" v-cloak
复制链接

扫一扫