Vue-过滤器&侦听器-学习笔记

已于 2022-11-10 20:59:52 修改
阅读量385 收藏 1
点赞数
文章标签： vue.js 学习 javascript
于 2022-11-10 20:54:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64450294/article/details/127795861
版权

目录

【过滤器】

（一）过滤器的基本使用

    关于过滤器函数声明

（二）私有过滤器 和 全局过滤器

（三）使用全局过滤器格式化时间

（四）过滤器的其他用法

【侦听器】

（一）什么是watch侦听器

   ·1）基本的语法格式

      ·2） 应用场景

（二）侦听器的格式

    1）方法格式的侦听器  （方便）

    2）对象格式的侦听器  handler

    深度侦听 （deep选项）

【过滤器】

        过滤器的基本使用、私有过滤器和全局过滤器、使用全局过滤器格式化时间、过滤器的其他用法

（一）过滤器的基本使用

         调用、声明（filters）、形参、charAt()、toUpperCase()、slice()
        过滤器常用于文本的格式化。
        过滤器本质上就是一个函数。
        可用在：插值表达式 和 v-bind属性绑定
        过滤器应该被添加在JavaScript表达式的尾部，由 “管道符”| 进行调用
        比如：要给message首字母大写，就在“管道符”之后添加首字母大写的过滤器函数
    例：实现首字母大写
    · 根据老师的步骤在code文档中建立一个网页（此时未调用过滤器）
    
    · 希望得到的是Hello vue.js，那么添加“管道符”进行调用
    
    · 如果不进行声明capi，直接调用，错误（即需要声明）
    

  •     关于过滤器函数声明

    过滤器函数必须被定义到 filters节点之下
    过滤器函数中必须 有返回值
    进行声明时，这里用到形参val  
    过滤器函数形参中的第一个 永远是“管道符”前面的那个值，在这里就是指代的message
    
    效果实现
    

（二）私有过滤器 和 全局过滤器

  • 私有过滤器：定义到vue实例中的 filters节点下的过滤器。因为它只能在当前实例所控制的el区域内使用。
         在上面接触到的过滤器其实就是私有过滤器
  • 全局过滤器：在多个vue实例之间共享过滤器（经常使用全局）
            Vue.filter() 方法接收两个参数
                1.是全局过滤器的“名字”
                2.是全局过滤器的“处理函数”
        代码
        
        上图中对于vm实例用有私有过滤器，vm2没有
        运行之后就会发现，vm没有实现全局过滤器 ↓↓↓↓
        
   注意：如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的还是“私有过滤器”

（三）使用全局过滤器格式化时间

    这里使用到前不久的品牌案例
    先将品牌案例文件夹复制到day3code文件夹中打开
    这是做成的原本的案例模样↓↓↓↓
    
    ·  调用过滤器
    要对“创建时间”这一栏格式化，打开对应的网页源代码找到时间↓↓↓↓那一块，添加调用过滤器
    
    ·  声明过滤器
    
    
    1.导入day.js的库文件
    2.直接调用dayjs()的话，得到的是当前的时间
    3.day.js(给定的日期时间) 得到指定的日期
    4.format（）厘米爱你要写需要得到的指定的日期格式
ps：Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间.直接搜索官网即可查看用法
    实现效果
    

（四）过滤器的其他用法

     （1）可连续调用多个过滤器
        {{ message | capi | xxx | yyy | zzz }}
        在第一个过滤器函数得到一个返回值。前面的返回值为后面的形参
        
     （2）过滤器传参
          first： 第一个参数，永远都是“管道符”前面的待处理的值
          other：从第二个参数开始，才是调用过滤器时传递过来的
        
             
     （3）过滤器的兼容性
        过滤器仅在vue 2.x和1.x中受支持，在vue3.x的版本中删除了过滤器的相关功能。

【侦听器】

监听数据变化，并进行什么操作

（一）什么是watch侦听器

        · watch 监听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
        · 侦听器本质上也是一个函数，要监视那个数据的变化，就把数据名作为方法名即可

   ·1）基本的语法格式

                newVal是“变化后的新值”，oldVal是“变化前的旧值”
                    新值在前，旧值在后
                
                效果实现
                

      ·2） 应用场景

                例：用户名是否被占用
                    只要值变化……
                
                    实现效果
                    输入
                    

（二）侦听器的格式

    1）方法格式的侦听器  （方便）

            ·缺点1：无法在一进入页面的时候，自动触发（函数形式的）
            ·缺点2：如果侦听的是一个对象，对象中的属性发生了变化，不会触发侦听器！！
            ·好处1：比较方便、简单

    2）对象格式的侦听器  handler

            ·好处1：可以通过 immediate 选项，让侦听器自动触发
            ·好处2：可以通过 deep 选项，让侦听器  深度监听 对象中每个属性的变化！
             基本语法格式
            
            
            效果实现
            

  •     深度侦听 （deep选项）

            对象格式的侦听器。
            使用deep选项，属性值有true/ false(默认值)。
            只要对象中任何一个属性变化，都会触发“对象的侦听器”
            
          情况1  比较麻烦
                    代码
                    
                    
   
                     输入
                    实现效果
                       
          情况2  如果想要侦听对象的子属性的变化
                    则需要包裹一层单引号
                    · 代码
                    
04160708
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
过滤器和监听器笔记.md
10-10
过滤器和监听器的简要介绍及实际场景中的运用
Servlet开发(2)-----过滤器和监听器
xiazdong
10-24 3292
六、过滤器(过滤Servlet) Servlet的一种，因此也有init和destroy方法,还有一个服务方法，只是这里提供的服务是过滤； 实现javax.servlet.Filter接口； 一般客户端发出请求后会交给Servlet；如果过滤器存在，则客户端发出的请求都是先交给过滤器，然后交给Servlet； 我们可以完成一些在执行Servlet之前必须要做的事，比如request
vue的过滤器和监听器
kangswx的博客
11-24 259
vue的过滤器的作用是对数据进行处理后再展示 过滤器有全局过滤器和组件内过滤器 全局过滤器：Vue.filter(‘过滤器名’, 过滤方式fn); 组件内过滤器filters:{‘过滤器名’, 过滤方式fn}； {{ msg | 过滤器名}} 最终都是在过滤方式fn里面return产出最终需要的结果 过滤器的使用方式–组件内过滤器 <!DOCTYPE html> &...
javaweb实训学习第九天 过滤器
gsq123sohu的博客
11-02 121
文章目录1.Filter是什么？2.怎么去实现Filter3.filter也是由Servlet容器负责管理的，管理Filter的生命周期5.FilterChain：Filter链，多个filter可以组成一个Filter链6.FilterConfig：代表的是当前filter，可以获取当前filter的配置信息7.如果使用注解Filter根据filter名字字母的顺序来绝对，一般命名为filter01、filter02以此类推 1.Filter是什么？ 可以对发生到servlet、jsp、html的请求进
过滤器和监听器重点笔记
育奕的个人博客
12-28 277
一、过滤器 1、过滤器Filter写法 (1)配置web.xml &lt;filter&gt; &lt;filter-name&gt;filterCount&lt;/filter-name&gt; &lt;filter-class&gt;com.jim.www.filter.FilterCount&lt;/filter-class&gt; &lt;init-param&...
vue-learning:前端菜鸟，学习vue 笔记
05-04
本笔记主要针对初学者，旨在帮助你逐步掌握Vue的核心概念和技术。 一、Vue.js基础知识 1. 模板语法：Vue采用基于HTML的模板语法，通过`v-bind`指令绑定数据，`v-if`和`v-for`进行条件和循环渲染，`v-on`处理事件...
Vue笔记，Vue笔记，Vue笔记
07-18
此外，可能会讲解到自定义指令和过滤器，这些都是扩展Vue功能的有效手段。 "Day 03"可能涵盖了Vue的生命周期，包括beforeCreate、created、beforeMount、mounted等钩子函数，以及如何在不同阶段进行操作。此外，还...
Vue-Fundoo:一个VueJS项目，标记了Google Keep的副本
03-27
在Vue-Fundoo中，可能有计算属性用于处理笔记的排序或过滤，以及侦听器用于实时更新视图。 5. **路由管理**：Vue-Fundoo可能使用Vue Router来实现页面间的导航。Vue Router是官方的路由插件，它提供了诸如动态路由...
vue2-course:Vue2课程的课程笔记和代码
04-27
4. **指令与过滤器**：Vue提供了多种内置指令，如v-if/v-else、v-for、v-bind和v-on，用于条件渲染、循环、属性绑定和事件处理。过滤器可以用于格式化输出数据，例如日期格式化或字符串转换。 5. **组件化**：组件...
vue教程(vue2笔记+vue3笔记)
04-22
12. 计算属性与侦听器：计算属性是基于依赖缓存的，而侦听器用于监听数据变化并执行回调。它们在实现列表过滤等场景中有不同应用。 13. `v-model`修饰符：`v-model`可以配合不同的修饰符实现不同的数据收集行为。 ...
Vue2.0教程（三）过滤器与侦听器
qq_43682422的博客
04-10 2495
1.过滤器 只有vue2.x支持，在vue3.x版本中已经被删除无法使用 1.1 过滤器概念和基本用法 过滤器(Filtes)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。 过滤器应该被添加在javaScript表达式的尾部，由‘管道符’进行调用，示例代码如下： <!--在双花括号中通过‘管道符’调用capitaliaze过滤器，对message的值进行格式化--> <p>{{messgae | capitalize}}&l
2.SpringBoot学习笔记—过滤器、监听器、拦截器
页川叶川
05-03 843
过滤器 (filter: 用于对指定的请求进行过滤，然后将请求交给对应的servlet进行处理并生成响应，最后filter再对服务器响应进行后处理。可以实现访问权限控制过滤敏感词汇压缩响应信息等功能。监听器 (listener: 用于监听和等域对象的创建和销毁事件。在事件发生前后做一些必要的处理。可以实现在线人数统计等功能。拦截器 (: 在面向切面编程 (AOP)中用于在某个方法被访问之前进行拦截，然后在处理前后加入某些功能。一般拦截器方法都是通过动态代理的方式实现，可以通过它来进行权限验证。
监听器Listener和过滤器Filter学习笔记
malaganguo的博客
08-11 316
Listener监听器 javaweb开发中的监听器，用于监听web常见对象 HttpServletRequest、HttpSession、ServletContext（三个域对象） 的创建与销毁、属性变化、session绑定javaBean的。 监听机制 1.事件：就是一个事情 2.事件源：产生这个事件的源头 3.监听器：用于监听指定事件的对象 4.注册监听：监听器要想可以监听到...
vue过滤器、侦听器、计算属性
weixin_42867002的博客
11-21 273
vue过滤器、侦听器、计算属性的使用方法。侵权删除
vue侦听器与过滤器
缚己
01-24 228
侦听器 和 addEventListener 事件监听器一样，当元素中某个事件被触发时，侦听器中绑定的方法自动被调用。 Vue 中的侦听器通常在 Vue 实例中声明一个 watch 属性，来响应数据的变化。如下代码所示： <div class="container"> <input type="text" v-model="uname"> </div> let vm = new Vue({ el: '.container', data: {
Vue中的监听器和过滤器
weixin_56751539的博客
08-20 67
<body> <div id="app"> <!-- 监听器 --> 姓:<input type="text" v-model.lazy="firstName" /><br /> 名:<input type="text" v-model.lazy="lastName" /><br /> 全名:{{fullN...
Vue计算属性侦听器和过滤器
实践求真知
10-22 265
一 计算属性和侦听器 计算属性：某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成。 侦听器：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。 二 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i.
vue过滤器，计算属性，侦听器
m0_60507322的博客
11-24 329
一. vue过滤器 1.定义及使用 过滤器只能用在, 插值表达式与 v-bind 表达式中 语法: 全局定义的过滤器,在main.js 中定义 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) 局部定义的过滤器 filters: {过滤器名字: (值) => {return "返回处理后的值"} 2.传参与多过滤器 可同时使用多个过滤器, 或者给过滤器传参 ...
vue过滤器和监听
Cmyu_的博客
03-04 168
过滤器 过滤器的主要作用 对数据的处理 获得一个时间 一般是时间戳格式 同一个时间显示不同的样子 对数据做处理 返回处理过的新数据 {{要过滤的数据 | (管道符号) 过滤器的名字}} Vue.filter 参数1 过滤器名 参数2 是一个函数 函数的第一个参数data就是要过滤的数据 也就是管道符号前面的东西 <div id="app"> {{ti...
SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
最新发布
09-27
您的问题是如何在运行 Vue CLI 时设置环境变量 `NODE_OPTIONS` 为 `--openssl-legacy-provider`？您可以通过以下步骤来实现： 1. 打开终端或命令提示符窗口。 2. 进入您的 Vue 项目所在的目录。 3. 运行以下命令来设置环境变量并启动服务： ```bash SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 如果您使用的是 Linux 或 macOS 系统，请使用 `export` 命令： ```bash export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 这样，`NODE_OPTIONS` 环境变量就会被设置为 `--openssl-legacy-provider` 并且 Vue CLI 服务会启动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值