当前位置：首页 > news >正文

Vue学习计划-Vue2--Vue核心（六）过滤器和自定义指令

news 2025/12/21 15:38:41

1. 过滤器

定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理）
语法：
1. 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1. 过滤器也可以接受额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据，是产生新的对应的数据

示例：(局部过滤器)

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><!-- 计算属性 --><h3>计算属性：</h3><p>{{ nameUpper }}</p><hr><h3>过滤器：</h3><!-- 过滤器 --><p>{{ name | nameSliceFilter | nameUpperFilter }}</p><p>{{ name | nameUpperFilter }}</p><hr><!-- 过滤器传参数 --><!-- <p>{{ longName | nameSliceFilter2(9, '测试传值') }}</p> --><p>{{ longName | nameSliceFilter2(9) }}</p><p>{{ longName | nameSliceFilter2() }}</p><hr><!-- 属性过滤器 --><p :name="name | nameSliceFilter | nameUpperFilter">属性过滤器文本</p></div><script>const vm = new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 计算属性computed:{nameSlice(){return this.name.slice(0,3)},nameUpper(){return this.nameSlice.toUpperCase()}},// 过滤器filters:{nameSliceFilter(val){// console.log(val);return val.slice(0,3)},nameUpperFilter(val){return val.toUpperCase()},// 过滤器传值// 可以传值，传多少个参数，就接收多少参数，但是第一个参数永远是原本数据// nameSliceFilter2(val,length, text){//     console.log(val, length,text);// }// nameSliceFilter2(val, length){nameSliceFilter2(val, length = 3){console.log(val, length);return val.slice(0, length)}}})</script></body></html>

示例：(全局过滤器)

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><p>{{ name | nameSliceFilter }}</p><p>{{ longName | nameUpperFilter }}</p></div><div id="root"><p>{{ rootName | nameSliceFilter }}</p></div><script>// 必须要把全局筛选器提前配置好Vue.filter('nameSliceFilter',(val)=>{return val.slice(0,3) })// app 实例挂载new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 过滤器filters:{// vue实例内的筛选器优先级更高// nameSliceFilter(val){//     return val.slice(0,4)// },nameUpperFilter(val){return val.toUpperCase()}}})// root实例挂载new Vue({el: '#root',data:{rootName: '这是rootName的值'},})</script></body></html>

2. 内置指令

v-bind, v-on,v-show…

v-text指令：

作用：向其所在的节点中渲染文本内容
与差值语法的区别：v-text会替换掉节点中的内容，{{ xx }} 不会

示例：

<body><div id="app"><!-- 通常 {{ }} 表较多， 更灵活 --><p>{{ name }}</p><p v-text="name"></p><hr><p>你好， {{ name }}</p><p v-text="name">你好，</p><hr><p>{{ str }}</p><p v-text="str"></p></div><script>new Vue({el: "#app",data:{name: "小红",str: '<h3>这是个标题</h3>'}})</script>
</body>

v-html指令：
1. 作用：向指定节点中渲染包含html结构的内容
2. 与插值语法的区别：
  1. v-html会替换掉节点中所有的内容，{{ xx }}不会
  2. v-html可以识别html结构
3. 严重注意：v-html有安全问题：
  1. 在网站上动态渲染任意HTML是非常危险的，容易收到XSS攻击
  2. 一定要在可信的内容上使用v-html，永不要在用户提交的内容上
示例：
```
    <body><div id="app"><p>{{ str }}</p><p v-text="str"></p><p v-html="str"></p></div><script>new Vue({el: "#app",data:{str: '<h3>这是个标题</h3>'}})</script></body>
```
v-cloak指令（没有值）：
1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2. 使用css配合v-cloak可以解决网速慢时页面展示出 {{ xx }} 的问题

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script><style>[v-cloak]{display: none;}</style></head><body><div id="app"><p v-cloak>{{ name }}</p></div><script>const vm = new Vue({// el: "#app",data:{name: '小红'}})setTimeout(() => {vm.$mount("#app")}, 5000);</script></body></html>

v-once指令：

v-once所在的节点初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

示例：

<body><div id="app"><!-- 需求： 显示初始值，也显示修改后的值 --><p v-once>初始的n值是：{{ n }}</p><p>当前的n值是：{{ n }}</p><button @click="n++">添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
</body>

v-pre指令：

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

示例：

<body><div id="app"><p v-pre>当前的n值是：</p><p>{{ n }}</p><button @click="n++" >添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
</body>

Vue模板语法有2大类：
1. 插值语法：
  - 功能：用于解析标签体内容
  - 写法： {{ xx }}, xx是js表达式，且可以直接读取到data中的所有属性
2. 指令语法：
  - 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
  - 举例：v-bind:href= ‘xxx’ 或简写 :href= ‘xxx’ xxx同样要写表达式，且可以直接读取到data中的属性
  - 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只拿v-bind举个例子

3. 自定义指令：

本质：是一个函数，不靠返回值获取值，靠操作收到的参数去获取值
作用：操作DOM元素: 例如v-bind,v-show,v-if等都是对DOM元素进行操作

两种方式：

函数式：写法简单，不能操作一些细节

directives:{// big函数何时会被调用？//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时big(element, binding){// element：指令所绑定的元素，可以用来直接操作 DOM// binding：一个对象，包含很多属性//    value: 指令的绑定值//    name: 指令名,不包括 v- 前缀//    expression：字符串形式的指令表达式console.log(element, binding);element.innerHTML = binding.value * 10}
}

对象式: 详细的表明执行到某一特定时期，调用特定函数

 directives:{fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}

定义语法：

局部指令：

new Vue({
directives:{指令名: 配置对象}
})
或
new Vue({
directives:{指令名: 回调函数}
})

全局指令：

Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)

配置对象中常用的3个回调：
1. bind: 指令与元素成功绑定时调用
2. inserted: 指令所在元素被插入页面时调用
3. update: 指令所在模板结构被重新解析时调用
备注：
1. 指令定义时不加v-, 但使用时要加v-
2. 指令中的this指向的是window
3. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

示例：（局部指令–对象式）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><!-- 需求1：写一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍 --><!-- 需求2：写一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素自动获取焦点 --><div id="app"><button @click="n++">操作</button><hr><input type="text" v-fbind="n"/></div><script>const vm = new Vue({el: '#app',data:{n: 1},directives:{// 函数式：// big函数何时会被调用？//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时// fbind(element, binding){//    element.value = binding.value//    element.focus()// }// 对象式：fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}})</script></body></html>

示例：（局部指令–函数式）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><!-- 需求1：写一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍 --><!-- 需求2：写一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素自动获取焦点 --><div id="app"><p>{{ name }}</p><h3>当前的n值是：<span v-text="n"></span></h3><h3>放大10倍后的n值是：<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>const vm = new Vue({el: '#app',data:{name: '小红',n: 1},directives:{// big函数何时会被调用？// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时big(element, binding){// console.log(element, binding);console.log('big');element.innerHTML = binding.value * 10}}})</script></body></html>

示例：（全局指令）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><h3>当前的n值是：<span v-text="n"></span></h3><!-- <h3>放大10倍后的n值是：<span v-big-number="n"></span></h3> --><h3>放大10倍后的n值是：<span v-big="n"></span></h3><button @click="n++">操作</button></div><hr><div id="root"><h3>当前的n值是：<span v-text="n"></span></h3><h3>放大10倍后的n值是：<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>Vue.directive('big',(element, binding)=>{element.innerHTML = binding.value * 20})new Vue({el: '#app',data:{n: 1},directives:{// 多个单词的话，推荐使用kebab-case命名// 'big-number'(element, binding){//   // console.log(element, binding);//   console.log('big', this) // this指向window//   element.innerHTML = binding.value * 30// },// 优先级更高big(element, binding){// console.log(element, binding);console.log('big', this) // this指向windowelement.innerHTML = binding.value * 10}}})new Vue({el: '#root',data:{n: 1},})</script></body></html>

Vue学习计划-Vue2--Vue核心（六）过滤器和自定义指令

1. 过滤器定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理）语法： 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 …...

编程日记 2023/12/9 1:18:59

Codeforces Round 913 (Div. 3) (A-G)

后天就是 I C P C ICPC ICPC杭州站了，今天把之前做的 d i v 3 div3 div3题补一下，打完这场杭州站这赛季除了 E C F i n a l EC\,\,Final ECFinal就结束了，以后应该要多打 c f cf cf比赛练习保持手感，争取下赛季冲一下金牌。感觉这…...

编程日记 2023/12/9 1:17:58

CSS——sticky定位

1. 大白话解释sticky定位粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】， 但当最近可滚动容…...

编程日记 2023/12/9 1:16:57

Redis hash表源码解析

1、整体数据结构链式hash解决hash冲突、采用渐进式hash来完成扩容过程。 /** 哈希表节点*/ typedef struct dictEntry {// 键void *key;// 值union {void *val;uint64_t u64;int64_t s64;} v;// 指向下个哈希表节点，形成链表struct dictEntry *next;} dictEntry;…...

编程日记 2023/12/9 1:15:55

dll动态链接库【C#】

1说明： 在C#中，dll是添加【类库】生成的。 2添加C#的dll： （1）在VS中新建一个Windows应用程序项目，并命名为TransferDll。 （2）打开Windows窗体设计器，从工具箱中为窗体…...

编程日记 2023/12/9 1:13:53

source_code: https://github.com/emagii/cpufrequtils cpufreq-set - A small tool which allows to modify cpufreq settings.（修改内存频率的工具） cpufreq-set allows you to modify cpufreq settings without having to type e.g. “/sys/devices…...

编程日记 2023/12/9 1:12:52

git基本概念

一、版本控制概念 1.1 什么是版本控制 1.1.1 手动管理文件版本 1.1.2 版本控制软件概念：版本控制软件是一个用来记录文件发生的变化，以便将来查阅特定版本修订情况的系统，有时也叫“版本控制系统”。通俗的理解就是把手工管理文件版本的方…...

编程日记 2023/12/9 1:09:50

多个HTML属性

在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。接下来开始吧！🚀 Accept 属性您可以将accept属性与<input>元素（仅用于文件类型&#xff…...

编程日记 2023/12/9 1:05:47

基于运算放大器的电压采集电路

一、运算放大器运放推导的两个重要概念：虚短、虚断。 1、差分放大器以差分放大器为例进行推导分析。虚断–运放的"-“端、”“端的引脚电流接近为0； 根据基尔霍夫电流定律可知：iR1iRF，iR2iR3； iR1(Ui1-(V-…...

编程日记 2023/12/9 1:04:47

数字图像处理（实践篇）十六基于分水岭算法的图像分割

目录一分水岭算法二利用OpenCV实现分水岭算法的过程三实践一分水岭算法基于任何灰度图像都可以视为地形表面，其中高强度表示山峰和山丘，而低强度表示山谷。首先，开始用不同颜色的水（标签）填充每个孤立的山…...

编程日记 2023/12/9 1:02:45

快速学习PyQt5的高级自定义控件

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口快速掌握Pyqt5的2种弹簧快速掌握Pyqt5的5种布局快速弄懂Pyqt5的5种项目视图（Item View） 快速弄懂Pyqt5的4种项目部件（Item Widget） 快速掌握Pyqt5的6种按钮快速掌握Pyqt5的10种容器&…...

编程日记 2023/12/9 1:01:44

Python中读写（解析）JSON文件的深入探究

目录一、引言二、如何读取JSON文件三、如何写入JSON文件四、如何解析JSON字符串五、错误处理和异常处理六、使用第三方库提高效率七、总结一、引言在Python中，我们经常使用JSON（JavaScript Object Notation）格式来存储和传输…...

编程日记 2023/12/9 0:54:39

我获取股票和期货数据的常用函数

记录一下获取数据所使用的函数，以防止遗忘和方便查找。 # 获取掘金的数据 # 需要打开并登陆掘金终端 def get_data_juejin(symbol"bu2112",start"2021-8-1",end"2021-8-30 23:00:00",frequency"1800s",fields"eob,sy…...

编程日记 2023/12/9 0:51:36

高并发场景下的httpClient使用优化技巧

1. 背景我们有个业务，会调用其他部门提供的一个基于http的服务，日调用量在千万级别。使用了httpclient来完成业务。之前因为qps上不去，就看了一下业务代码，并做了一些优化，记录在这里。先对比前后：优化…...

编程日记 2023/12/9 0:47:32

用php上传图片到阿里云oss

如果你想自动创建目录并将文件上传到新的目录下，你可以使用阿里云 OSS 的 createObject 方法来实现。下面是更新后的示例代码： php <?php require_once __DIR__ . /vendor/autoload.php; // 引入 SDKuse OSS\OssClient; use OSS\Core\OssException;…...

编程日记 2023/12/9 0:45:29

服务器适合哪些使用场景_Maizyun

服务器适合哪些使用场景在当今的数字化时代，服务器作为互联网基础设施的核心组件，被广泛应用于各种场景。本文将探讨服务器适合哪些使用场景。一、Web服务器 Web服务器是服务器中最常见的一种，用于托管和运行网站。它负责处理来自客户端…...

编程日记 2023/12/9 0:43:28

发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

来源：猛兽财经作者：猛兽财经谷歌在AI领域的最新进展，引发投资者关注在谷歌-C(GOOGL)谷歌-A（GOOG）昨日发布了最新的AI大模型Gemini后，其股价就出现了大幅上涨，更是引发了投资者的密切关注&a…...

编程日记 2023/12/9 0:41:26

年度工作总结怎么写？掌握这些年终总结万能公式，让你的报告出彩无比！

光阴似箭，日月如梭，时间总是不疾不徐地向前奔去，转眼就来到了2023年的最后一个月，12月一到，上班族和打工人又要开始忙活工作总结的事情~ 工作总结，不仅是一年工作的回顾，更是未来规划的起点。你…...

编程日记 2023/12/9 0:36:20

常用Nmap脚本

端口扫描类脚本 Nmap是一款非常流行的端口扫描工具，它可以帮助渗透测试工程师识别目标网络上开放的端口，并提供有关这些端口的详细信息。Nmap还提供了一系列基于脚本的功能，这些脚本可以扩展Nmap的功能，使其能够更深入地探测目标网…...

编程日记 2023/12/9 0:35:19

在pom.xml中添加maven依赖，但是类里面import导入的时候报错

问题： Error:(27, 8) java: 类TestKuDo是公共的, 应在名为 TestKuDo.java 的文件中声明 Error:(7, 23) java: 程序包org.apache.kudu不存在 Error:(8, 23) java: 程序包org.apache.kudu不存在 Error:(9, 23) java: 程序包org.apache.kudu不存在 Error:(10, 30) jav…...

编程日记 2023/12/9 0:34:18

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/12/14 17:38:17

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞！！！ 摘要视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...

编程新知 2025/12/17 22:17:02

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...

编程新知 2025/9/17 2:39:21

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

uniapp 小程序学习（一）

利用Hbuilder 创建项目运行到内置浏览器看效果下载微信小程序安装到Hbuilder 下载地址 ：开发者工具默认安装设置服务端口号在Hbuilder中设置微信小程序配置找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现如下 bug 解…...

编程新知 2025/12/20 22:35:02

Vue3中的computer和watch

computed的写法在页面中 <div>{{ calcNumber }}</div>script中写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/11/8 20:34:42

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 原创笔记：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：《数据结构第4章数组和广义表》…...

编程新知 2025/12/16 20:16:35

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

系列回顾： 在上一篇《React核心概念：State是什么？》中，我们学习了如何使用useState让一个组件拥有自己的内部数据（State），并通过一个计数器案例，实现了组件的自我更新。这很棒&#…...

编程新知 2025/9/6 3:35:30

深度解析云存储：概念、架构与应用实践

在数据爆炸式增长的时代，传统本地存储因容量限制、管理复杂等问题，已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性，成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理，云存储正重塑数据存储与…...

编程新知 2025/10/30 6:08:18

Vue学习计划-Vue2--Vue核心（六）过滤器和自定义指令

1. 过滤器

2. 内置指令

3. 自定义指令：

相关文章：

Vue学习计划-Vue2--Vue核心（六）过滤器和自定义指令

Codeforces Round 913 (Div. 3) (A-G)

CSS——sticky定位

Redis hash表源码解析

dll动态链接库【C#】

Linux 系统设置cpu频率

git基本概念

多个HTML属性

基于运算放大器的电压采集电路

数字图像处理（实践篇）十六基于分水岭算法的图像分割

快速学习PyQt5的高级自定义控件

Python中读写（解析）JSON文件的深入探究

我获取股票和期货数据的常用函数

高并发场景下的httpClient使用优化技巧

用php上传图片到阿里云oss

服务器适合哪些使用场景_Maizyun

发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

年度工作总结怎么写？掌握这些年终总结万能公式，让你的报告出彩无比！

常用Nmap脚本

在pom.xml中添加maven依赖，但是类里面import导入的时候报错

synchronized 学习

java_网络服务相关_gateway_nacos_feign区别联系

视频字幕质量评估的大规模细粒度基准

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

docker 部署发现spring.profiles.active 问题

uniapp 小程序学习（一）

Vue3中的computer和watch

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

深度解析云存储：概念、架构与应用实践