袁磊老师的课，VUE（四）

最新推荐文章于 2022-01-31 00:05:35 发布

赵俸堃是我的名字

最新推荐文章于 2022-01-31 00:05:35 发布

阅读量176

点赞数

分类专栏：前端基础袁磊老师的课 Vue 文章标签： vue练习 vue

本文链接：https://blog.csdn.net/qq_43511842/article/details/89512951

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

Vue

8 篇文章 0 订阅

订阅专栏

一、自定义指令
当vue提供的系统指令不能满足需求时，就需要自己定义指令来进行扩展。例如v-focus指令来实现文本框自动获取焦点功能。
练习1
具体知识点在代码的注释中！！！！！1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE自定义指令</title>
</head>

<body>
    <div id="app">
        <input v-jiaodian="xxx">
        <!-- v-jiaodian后面没有东西，就是没有属性值 -->
        <div v-ba="3+3">自定义指令</div>
        <!-- 注意这里的v-ba一定要跟东西 -->
        <div v-ba="pink">自定义指令修改颜色</div>
        <div v-ba="blue">自定义指令修改颜色</div>
        <div v-ba="green">自定义指令修改颜色</div>
    </div>
    <script src="vue.js"></script>
    <script>
        // 重点！！！！一定要在new VUE之前！！！！
        Vue.directive("jiaodian", {
            bind: function () {
                console.log('bind')
            },
            inserted: function (el) {
                el.focus();
                // 这样在上边的input中调用v-jiaodian的时候，就会给一个焦点了
            },
            updated: function () {
                console.log('update');
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            directives: {
                // 如果只写一个方法，那么代表是update
                // 第一个el代表的是作用在的元素， 第二个参数bind， 第三个参数vnode  
                // 第一个和第二个参数经常用到，第三四个不经常用
                ba: function (el, bind, vnode) {
                    console.log(bind);
                    el.style.fontsize = '100px';
                    el.style.background = bind.expression;
                    // 当v-ba中是文字的时候，需要写expression   
                }
            }
        })
    </script>
</body>

</html>

二、过滤器
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。可被用于一些常见的文本格式化。
练习2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部过滤器</title>
</head>

<body>
    <div id="app">
        <h2>{{now | datefmt("-")}}</h2>
        <!-- 过滤器的写法，| 过滤器(参数) -->
        <!-- 过滤器的参数 sc就是上面datefmt的参数  -     -->
        <h2>{{msg | rs}}</h2>
        <h2>{{msg | dl}}</h2>
        <h2>{{msg | dl | dl | dl | dl | dl}}</h2>
        <!-- 多重过滤器 -->

    </div>

    <script src="vue.js"></script>
    <script>
        // 在new vue之前写！！！
        // 这个是全局的过滤器
        Vue.filter("datefmt", function (input, sc) {
            // 第一个参数input是要过滤的东西
            let date = new Date(input);
            // 获取日期
            let year = date.getFullYear();
            // 获取哪一年
            let mon = date.getMonth() + 1;
            // 获取月份
            let day = date.getDate();
            // 做一些美化
            if (mon < 10) mon = '0' + mon;
            if (day < 10) day = '0' + day;
            return year + sc + mon + sc + date;
            // ***************重点！！！过滤器一定要有return******************
        })
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'yuanlei',
                now: new Date(),
            },
            // 这里就是局部的过滤器
            filters: {
                rs: function (input) {
                    return input.split("").reverse().join("");
                },
                dl(input) {
                    return "$" + input;
                }
            }
        })
    </script>
</body>

</html>

自定义指令和过滤器都有“局部”和“全局”之分，即写在new Vue（{}）中，还是写在它外面，区别就是当写在new Vue（{}）外部的时候，这个指令或者过滤器是弄够以文件的形式emport并被其他文件import的，就是可以被很多个文件使用的！！！

今天的代码，自己拿去玩吧

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，VUE（四）

一、自定义指令当vue提供的系统指令不能满足需求时，就需要自己定义指令来进行扩展。例如v-focus指令来实现文本框自动获取焦点功能。练习1具体知识点在代码的注释中！！！！！1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...
复制链接

扫一扫