过滤器、自定义指令、组件三者的注册及使用场景

最新推荐文章于 2023-03-16 15:00:13 发布
最新推荐文章于 2023-03-16 15:00:13 发布
阅读量456 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
@不甜呐
本文链接：https://blog.csdn.net/weixin_55992854/article/details/119976656
版权

把它们放在一起写呢，是因为它们都分为两种——局部注册和全局注册。

需要注意的是：这三者的局部注册(有s)和全局注册(没有s)使用到的关键单词类似，请注意区分。

另外，过滤器的全局注册、自定义指令的全局注册和组件的全局注册都要写在Vue实例之前，详情请看: https://blog.csdn.net/weixin_55992854/article/details/119107461

目录

过滤器

局部注册

全局注册

拓展

      1.过滤器是可以传参数的

      2.过滤器可以串联使用

自定义指令

局部注册

全局注册

组件

什么是组件

组件的特点

组件的分类和使用

全局注册

局部注册

过滤器

  • 作用:处理数据格式

  • 使用位置:双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

  • 分类:局部注册和全局注册

局部注册

  1. 在Vue实例对象的选项中配置过滤器filters:{}

  2. 过滤器的名字: (要过滤的数据)=>{return 过滤的结果}

  3. 在视图中使用过滤器: {{被过滤的数据 | 过滤器的名字}

<body>
    <div id="app">
        <p>处理前：{{msg}}</p>
        <!-- 3. 调用过滤器 -->
        <p>处理后：{{msg | toUpper}}</p>
    </div>
    <div id="aaa">
        <p>处理前：{{msg}}</p>
        <p>处理后：{{msg | toUpper}}</p>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'kfc'
        },
        // 1. 设置vue实例的过滤器filters选项
        filters: {
            toUpper: function(v) {
                // 2. 在过滤器的方法中操作数据并返回结果
                return v.toUpperCase();
            }
        }
    });
</script>

注意: 局部注册的过滤器只适用于当前Vue实例对象

全局注册

  1. 在创建 Vue 实例之前定义全局过滤器Vue.filter()

  2. Vue.filter('过滤器的名字',(要过滤的数据)=>{return 对数据的处理结果});

  3. 在视图中通过{{数据 | 过滤器的名字}}或者v-bind使用过滤器

<body>
    <div id="app">
        <p>处理前：{{msg}}</p>
        <!-- 3. 调用过滤器: (msg会自动传入到toUpper中)-->
        <p>处理后：{{msg | toUpper}}</p>
    </div>
    <div id="aaa">
        <p>处理前：{{msg}}</p>
        <p>处理后：{{msg | toUpper}}</p>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    // 1. 定义全局过滤器
    Vue.filter('toUpper', (value) => {
        console.log(value);
        // 2. 操作数据并返回
        value = value.toLowerCase();
        console.log(value);
        return value;
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
    });
    new Vue({
        el: '#aaa',
        data: {
            msg: 'hello'
        },
    });
</script>

注意: 全局注册的过滤器, 不同的Vue实例对象都可以使用

拓展

      1.过滤器是可以传参数的

<div id="app">
    {{count | toD("元")}}
</div>

<script src="../js/vue.js"></script>
<script>
    //(v,y)中v指的是被处理的数据count,y指的是自己传入的参数("元")
    Vue.filter("toD", (v, y) => {
        console.log(v);
        console.log(y);
        return "$" + v + y;
    });


    new Vue({
        el: "#app",
        data: {
            count: 100,
        },
    });
</script>

      2.过滤器可以串联使用

<div id="app">
    <!-- 
        2.串联使用 
        {{被处理的数据 | 过滤器A | 过滤器B}}
        注意: 过滤器A处理的是count
        过滤器B处理的是过滤器A所返回的结果
    -->
    {{count | A | C("元")}}
</div>

<script src="../js/vue.js"></script>
<script>

    Vue.filter("A", (v) => {
        return "$" + v;
    });
    Vue.filter("C", (v, y) => {
        console.log(v);//$100
        return v + y;
    });

    new Vue({
        el: "#app",
        data: {
            count: 100,
        },
    });
</script>

自定义指令

  • 使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令

  • 分类:全局注册和局部注册

局部注册

  1. 在Vue实例对象的选项中设置自定义指令 directives:{}

  2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}

  3. 在视图中通过标签去使用指令

<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        // 1. 在vm对象的选项中设置自定义指令 directives:{}
        directives: {
            // 2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
            focus: {
                // 指令的定义
                inserted: function(el) {
                    el.focus();
                }
            }
        }
    });
</script>

注意：只能在该选项所在的vue实例所管理的视图中使用

全局注册

  1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive()

  2. Vue.directive('指令的名称',{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );

  3. 在视图中通过"v-自定义指令名"去使用指令

<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>

<script src="./vue.js"></script>
<script>
    // 全局自定义指令
    // 1.在创建 Vue 实例之前定义全局自定义指令Vue.directive()
    // 2. Vue.directive('指令的核心名称',{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } } );
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });

    new Vue({
        el: '#app'
    });
</script>

Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-

inserted:当被绑定的元素插入到 DOM 中时,会被调用

组件

什么是组件

需求:如果页面中有多个一样结构的控件,比如

<div id="app">
    <!-- 页面中有多个一样结构的标签: span+button -->
        <span>{{count1}}</span> <button @click="changeCount1">按钮</button> <br>
        <span>{{count2}}</span> <button @click="changeCount2">按钮</button> <br>
        <span>{{count3}}</span> <button @click="changeCount3">按钮</button> <br>
        <span>{{count4}}</span> <button @click="changeCount4">按钮</button> <br>
        <span>{{count5}}</span> <button @click="changeCount5">按钮</button> <br>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count1: 0,
            count2: 0,
            count3: 0,
            count4: 0,
            count5: 0
        },
        methods: {
            changeCount1() {
                this.count1++;
            },
            changeCount2() {
                this.count2++;
            },
            changeCount3() {
                this.count3++;
            },
            changeCount4() {
                this.count4++;
            },
            changeCount5() {
                this.count5++;
            }
        }
    });
</script>

问题:

  1. 代码重复冗余

  2. 不利于维护

解决方案: 使用Vue中一个十分重要的特性--组件

<div id="app">
    <!-- 2. 使用组件 -->
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
</div>

<script src="./vue.js"></script>
<script>
    // 注册全局组件
    Vue.component('span-btn', {
        template: `
			<div>
				<span>{{count}}</span> 
				<button @click="changeCount">按钮</button>
                <br>
    		</div>
		`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    new Vue({
        el: '#app'
    });
</script>

什么是组件:

组件系统是 Vue 的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。

仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

  • 组件是可复用的 Vue 实例，且带有一个名字

  • 组件的选项:

    • 组件与new Vue接收相同的选项:例如 data、computed、watch、methods 以及生命周期钩子等。

    • 仅有的例外是像 el 这样根实例特有的选项

  • 另外, 组件也有自己的选项 template、components等

组件的特点

  • 组件是一种封装

  • 组件能够让我们复用已有的html、css、js

  • 可复用

  • 是一个特殊的Vue实例

  • 可以任意次数的复用

  • 每用一次组件，就会有一个它的新实例被创建

  • 组件中的data要求必须是一个函数,且需要返回一个对象

    • 组件有自己的作用域

  • template每个组件模板有且只有一个根元素

建议: 在实际开发中,尽可能使用各种第三方组件element-ui/mint-ui/iview等

组件的分类和使用

  • 分类:全局注册和局部注册

  • 使用(步骤):1. 注册组件 2. 通过组件名字使用组件

全局注册

  1. 使用Vue.component(组件名,组件选项) 进行注册

    组件名:推荐小写加减号的命名方式

  2. 用在其被注册之后的任何 (通过 new Vue) 新创建的 (一个或者多个)Vue 实例

Vue.component('组件名', {
    // 组件选项: data methods template等(没有el)
    // data 的值是一个函数, 需要返回一个对象
});
<div id="app">
    <!-- 2. 使用组件 -->
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
</div>
<hr>
<div id="app1">
    <span-btn></span-btn>
    <My-Component></My-Component>
</div>
<hr>
<div id="app2">
    <span-btn></span-btn>
</div>
<hr>
<div id="app3">
    <span-btn></span-btn>
</div>

<script src="./vue.js"></script>
<script>
    // 1. 注册组件
    // Vue.component('组件名', {
    //     // 组件选项: data methods template等
    // });

    Vue.component('span-btn', {
        // template: 页面字符串,有且仅有一个根元素
        template: `
			<div>
				<span>{{count}}</span> 
				<button @click="changeCount">按钮</button>
                <br>
    		</div>
		`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    Vue.component('myComponent', {
        template: `
			<div>
				<h1>{{num}}</h1> 
				<button @click="changeTitle">按钮</button>
                <br>
    		</div>
		`,
        style: './style.css',
        data() {
            return {
                num: 0
            }
        },
        methods: {
            changeTitle() {
                this.num++;
            }
        }
    });

    new Vue({
        el: '#app'
    });

    new Vue({
        el: '#app1'
    });
    new Vue({
        el: '#app2'
    });
    new Vue({
        el: '#app3'
    });
</script>

注意:

  1. 全局组件必须写在Vue实例创建之前，才在该根元素下面生效

  2. 在不同的Vue实例中可以使用多个不同的全局组件

  3. 每个组件有自己的作用域

局部注册

  • 直接在Vue实例里面通过 components选项进行注册

  • 对于 components 对象中的每个属性来说，

    • 其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

<body>
    <div id="app">
        <!-- 2 使用组件 -->
        <com-A></com-A>
        <com-B></com-B>
        <com-C></com-C>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    // 局部组件的选项
    const comA = {
        template: `<div>{{titleA}}</div>`,
        data() {
            return {
                titleA: 'comA中的data里的titleA'
            }
        }
    };
    const comB = {
        template: `<div>{{titleB}}</div>`,
        data() {
            return {
                titleB: 'comB中的data里的titleB'
            }
        }
    };

    const comC = {
        template: `<div>{{titleC}}</div>`,
        data() {
            return {
                titleC: 'comC中的data里的titleC'
            }
        }
    };

    new Vue({
        el: '#app',
        // 1. 在Vue实例中设置components选项{组件名:组件选项}
        components: {
            // 在页面中的组件名:组件选项
            'comA': comA,
            'comB': comB,
            'comC': comC
        }
    });
</script>

不甜呐
关注
专栏目录
【三十天精通Vue 3】第十二天 Vue 3 的函数式组件详解（过滤器已废弃）
陈书予
04-18 9253
定义函数式组件非常简单，只需要将组件的 template 部分替换为一个返回 VNode 的函数即可。// 函数式组件的定义 const FunctionalComponent =(props , context) => {`);​ // 函数式组件的使用 < template > < FunctionalComponent name = "Vue3" / > < / template >${
安全风险 - 组件导出风险
最新发布
Android、前端、小程序、后端
05-31 2191
在安全审查中关于组件导出风险是一种常见问题，不同组件都有可能遇到这种问题，而且从一定角度来看的话，如果涉及到三方业务，基本处于无法解决的场景，所以我们需要说明为何无法避免这种风险
springboot中过滤器的几种注册方式
qq_34136709的博客
06-19 2499
springboot中过滤器的几种注册方式 看过源码的肯定都知道springboot中过滤器有三种注册方式，下面我们分别来看看这三个 1.@WebFilter 通过 @WebFilter 注解来标记一个过滤器，这种方式相信大家很容易想到。这是将 Servlet 中的那一套东西直接拿到 Spring Boot 上用。 具体做法就是通过 @WebFilter 注解来标记一个 Filter，如下： @WebFilter(urlPatterns = "/*") public class MyFilter imple
多个全局自定义指令，组件，过滤器，混入的注册方法
weixin_45035179的博客
11-26 264
1. 全局自定义指令 2. 全局混入 3. 全局自定义组件 4. 全局过滤器
注册组件命令
i'm DiNK
04-17 1382
注册dll 或者ocx 利用regsvr32命令 取消注册用regsvr32 /u 注册后不出现注册成功用参数 /s 
插槽组件 自定义指令-注册
m0_68331234的博客
05-21 243
组件-插槽 语法口诀: 组件内用<slot></slot>占位 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot 当组件内某一部分标签不确定：用插槽技术 插槽具体使用：先在组件内用slot占位，使用组件时, 传入具体标签插入 插槽运行效果：传入的标签会替换掉slot显示 插槽-默认内容 口诀: <slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地
vue使用之自定义指令、组件开发和组件通讯
qq_43537721的博客
07-30 1087
vue使用之自定义指令、组件开发和组件通讯
Vue-插槽、自定义指令、render渲染函数、过滤器、插件
weixin_45753087的博客
10-27 372
简单前端知识
【Android开发API】应用的组成部分-意图和意图过滤器.pdf
09-30
系统会根据Intent的属性与组件的过滤器进行匹配，找出最合适的接收者。 **Intent解析(Intent Resolution)** 当Intent没有明确的组件名时，Android会根据Intent的其他属性，如动作、数据和类别，进行解析和匹配。...
Apache HTTP 过滤器filter、开源WAF（ModSecurity）、Apache 模块开发
西京刀客
03-08 2528
在编写Apache模块时，需要具备C或C++编程经验和对Apache Web服务器的基本了解。另外，需要参考Apache的文档和API参考手册来编写代码和构建模块。
vue 快速生成组件的指令_Vue中自定义指令的使用方法！
weixin_39994296的博客
12-20 258
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：(咳咳，借官网的用一用)1、定义全局的自定义变量main.jsVue.directive('color',{inserted(e...
动态组件 & 插槽 & 自定义指令
小管管的博客
06-12 639
动态组件指的是vue 提供了一个内置的，专门用来。 可以认为，给组件占位,它的is属性指定哪个组件的名称，就把哪个组件渲染到它所在的位置。默认情况下，切换动态组件时无法保持组件的状态，会被销毁，此时可以使用 vue 内置的 保持动态组件的状态。 示例代码如下： 当组件时，会自动触发组件的 生命周期函数。 当组件时，会自动触发组件的 生命周期函数。 当组件第一次被创建的时候，既会执行created生命周期（先），又会执行activated生命周期（后）。但组件被激活的时候只会触发activ......
VUE自定义全局和组件内指令
qq_25117449的博客
03-13 733
如何自定义全局和组件内指令 自定义指令官方文档 注册全局自定义指令 注册组件内自定义指令 仓库地址 github
vue filters全局注册和局部注册
qq_23064501的博客
03-16 760
1、全局注册（在main.js） import * as filters from './filters' // global filters Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) 2、局部（组件里面） filters: { statusFilter(status) { ...
自定义过滤器需要在setting中注册
mengzh620的博客
11-14 265
报以下这个错误的时候：django.template.exceptions.TemplateSyntaxError: ‘fliters’ is not a registered tag library. Must be one of: admin_list admin_modify admin_static admin_urls cache i18n l10n log static staticf...
Netbeans平台: 我该使用何种注册方式呢?
jbossday的专栏
06-25 207
我们知道在Netbeans平台中有四种注册/安装方式: 在模块的JAR文件的META-INF/services目录下增加文件条目 在系统文件系统下的某目录下增加文件 在模块的manifest文件中增加manifest条目 实现org.openide.modules.ModuleInstall类并且在manifest文件中配置, 这种方式是在系...
Vue过滤器filter
M815241的博客
09-25 802
1.是vue为开发者提供的功能，常用于文本的格式化2，要用于文本的格式化，或者数据的过滤与排序等。3，或分为两种，一种是局部过滤器，一种全局过滤器。所有的过滤器都是函数，并且参数为要过滤的数据。局部过滤器：只允许在当前组件中使用。全局过滤器：所有组件都可以使用。
Vue过滤器
Blue_Pepsi_Cola的博客
01-14 2547
在Vue.js中，过滤器主要用于文本的格式化，或者组件数据的过滤与排序等。从Vue2.0.0版本开始，内置的过滤器已经被删除，需要自己编写。
Vue3的自定义指令
weixin_53841730的博客
03-16 1424
理解这些钩子函数也很简单：我们都知道自定义指令是作用在DOM元素上，那么自定义指令从绑定到DOM元素，再到DOM元素发生变化等等一系列操作，都对应了不同的钩子函数，比如当DOM元素插入到文档中时，自定义指令的mounted等钩子函数就会执行。我们使用自定义指令的目的就是为了灵活的操作DOM以及在钩子函数中处理我们的业务逻辑，所以Vue3将一些我们可能会用到的参数传递给了钩子函数，Vue3和Vue2中的自定义指令传递的参数都很类似。自定义指令也是类似的原理，我们需要先注册自定义指令，然后才可以使用它。
Vue 图书管理实战：过滤器、自定义指令与性能优化
"Vue 图书管理案例展示了如何运用多种核心特性进行数据处理，包括过滤器、自定义指令、计算属性、侦听器以及组件的生命周期。案例中涉及到的关键点有箭头函数的this指向、数组操作方法的选择以及时间格式化的实现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值