# Vue 入门级教程三
在前两篇 Vue 入门教程中,我们已经熟悉了 Vue 的基础语法、数据绑定、指令以及组件化开发等核心概念。在本教程中,我们将进一步探索 Vue 的高级特性,包括过滤器、自定义指令、过渡效果以及 Vue 与后端数据交互等内容,让你能够构建出更加丰富和动态的前端应用。
一、过滤器(Filters)
过滤器是 Vue.js 中用于对数据进行格式化或转换的功能。它们可以在模板插值表达式中使用,也可以在 v-bind 指令中使用,以方便地处理数据显示的格式。
1. 全局过滤器
我们可以通过 Vue.filter 方法来定义全局过滤器。例如,创建一个将文本转换为大写的过滤器:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Filters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><p>{{ message | uppercase }}</p></div><script>// 定义全局过滤器Vue.filter('uppercase', function (value) {if (!value) return '';return value.toUpperCase();});const app = new Vue({el: '#app',data: {message: 'hello, vue!'}});</script>
</body></html>
在上述代码中,我们定义了名为 uppercase 的全局过滤器,它接受一个值并将其转换为大写字母形式,然后在模板中通过 {{ message | uppercase }} 的方式使用该过滤器对 message 数据进行处理。
2. 局部过滤器
除了全局过滤器,我们还可以在组件内部定义局部过滤器。例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Local Filters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><my-component></my-component></div><script>const app = new Vue({el: '#app',components: {'my-component': {template: '<div>{{ date | formatDate }}</div>',data() {return {date: new Date()};},filters: {// 定义局部过滤器formatDate(value) {const options = { year: 'numeric', month: 'long', day: 'numeric' };return value.toLocaleDateString(undefined, options);}}}}});</script>
</body></html>
这里在 my-component 组件内部定义了 formatDate 局部过滤器,用于将日期对象格式化为更易读的形式,并在组件模板中应用于 date 数据。
二、自定义指令(Custom Directives)
Vue 允许我们自定义指令,以实现对 DOM 元素的底层操作和更灵活的功能扩展。
1. 全局自定义指令
例如,创建一个自定义指令来设置元素的背景颜色:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Custom Directives Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><div v-bg-color="'red'">This div has a custom background color.</div></div><script>// 定义全局自定义指令Vue.directive('bg-color', function (el, binding) {el.style.backgroundColor = binding.value;});const app = new Vue({el: '#app'});</script>
</body></html>
在这个例子中,我们使用 Vue.directive 方法定义了 v-bg-color 全局自定义指令,它接受一个值(这里是颜色字符串),并将对应的元素背景颜色设置为该值。
2. 局部自定义指令
局部自定义指令可以在组件内部定义和使用。例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Local Custom Directives Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><my-component></my-component></div><script>const app = new Vue({el: '#app',components: {'my-component': {template: '<div v-local-color="color">This div has a local custom background color.</div>',data() {return {color: 'blue'};},directives: {// 定义局部自定义指令'local-color': function (el, binding) {el.style.backgroundColor = binding.value;}}}}});</script>
</body></html>
这里在 my-component 组件内定义了 v-local-color 局部自定义指令,用于设置组件内部元素的背景颜色。
三、过渡效果(Transitions)
Vue 提供了方便的过渡效果机制,让我们可以在元素插入、更新或移除时添加动画效果,增强用户体验。
1. 简单过渡示例
例如,我们创建一个淡入淡出效果的过渡:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Transitions Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>.fade-enter-active,.fade-leave-active {transition: opacity 0.5s;}.fade-enter,.fade-leave-to {opacity: 0;}</style>
</head><body><div id="app"><button @click="show =!show">Toggle</button><transition name="fade"><p v-if="show">This is a fading element.</p></transition></div><script>const app = new Vue({el: '#app',data: {show: true}});</script>
</body></html>
在上述代码中,我们使用 transition 组件包裹需要添加过渡效果的元素,并通过 name 属性指定过渡类名的前缀(这里是 fade)。然后定义了对应的过渡类,如 .fade-enter-active 用于元素进入时的过渡动画,.fade-leave-active 用于元素离开时的过渡动画等。当点击按钮切换 show 变量的值时,p 元素会根据过渡类的定义产生淡入淡出的效果。
2. 过渡模式
Vue 还支持多种过渡模式,如 in-out(先进入后离开)、out-in(先离开后进入)等。例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Transition Modes Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>.slide-enter-active,.slide-leave-active {transition: all 0.5s;}.slide-enter,.slide-leave-to {transform: translateX(100%);}</style>
</head><body><div id="app"><button @click="show =!show">Toggle</button><transition name="slide" mode="out-in"><p v-if="show">This is a sliding element.</p></transition></div><script>const app = new Vue({el: '#app',data: {show: true}});</script>
</body></html>
这里使用了 out-in 过渡模式,当切换元素显示状态时,先执行离开动画,然后再执行进入动画,实现了更流畅的过渡效果。
四、Vue 与后端数据交互
在实际应用中,Vue 通常需要与后端服务器进行数据交互,以获取和更新数据。我们可以使用 axios 等 HTTP 库来实现与后端的通信。
首先,引入 axios:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
然后,在 Vue 组件中进行数据请求和处理。例如,从后端获取一个用户列表并显示:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Data Interaction Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id="app"><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div><script>const app = new Vue({el: '#app',data: {users: []},mounted() {axios.get('/api/users').then((response) => {this.users = response.data;});}});</script>
</body></html>
在上述代码中,在 mounted 生命周期钩子中使用 axios 发送 GET 请求到 /api/users 后端接口,获取用户数据,并将其赋值给 users 数据属性,然后在模板中通过 v-for 指令循环显示用户列表。
通过本教程的学习,你已经掌握了 Vue 的过滤器、自定义指令、过渡效果以及与后端数据交互等高级特性。这些特性将帮助你构建出更加专业和富有交互性的 Vue 应用程序。继续深入学习 Vue 的其他知识,如 Vue Router 路由管理、Vuex 状态管理等,你将能够开发出功能完备、大型复杂的前端项目。
如果在学习过程中有任何疑问或建议,欢迎在评论区留言交流。
相关文章:
# Vue 入门级教程三
在前两篇 Vue 入门教程中,我们已经熟悉了 Vue 的基础语法、数据绑定、指令以及组件化开发等核心概念。在本教程中,我们将进一步探索 Vue 的高级特性,包括过滤器、自定义指令、过渡效果以及 Vue 与后端数据交互等内容,让你能够构建…...
hint: Updates were rejected because the tip of your current branch is behind!
问题 本地仓库往远段仓库推代码时候提示: error: failed to push some refs to 192.168.2.1:java-base/java-cloud.git hint: Updates were rejected because the tip of your current branch is behind! refs/heads/master:refs/heads/master [rejected] (…...
PHP 方头像转为圆图
业务需要把创建海报上的用户头像由方形转为圆形,前端的样式设置不能用。 故采用GD的函数来对方图进行裁剪处理为圆图。 目录 裁剪函数 本地图片 远程图片 效果 参考文章 总结 裁剪函数 从网上找的一个裁剪图片的函数。 代码如下: /* * 将图片切…...
centos 7 离线安装postgis插件
前一段时间记录了下如何在centos7中离线安装postgresql,因为工作需要,我不仅要安装postgresql,还需要安装postgis插件,这篇文章记录下postgis插件的安装过程。 1. 安装前的参考 如下的链接都是官网上的链接,对你安装p…...
pyinstaller打包的时候将ffmpeg也加进包中(包括打包文件夹的方法)
在使用 PyInstaller 打包包含 pydub 的 Python 应用程序时,由于 pydub 需要依赖 ffmpeg,你需要确保 ffmpeg 被正确包含进打包后的程序。以下是操作步骤: 1. 准备 ffmpeg 首先,确保你已经下载并安装了 ffmpeg。可以通过以下方式获取…...
JVM面试知识点1
内存结构(掌握内存结构划分、熟知各区域结构功能) 经典的JVM内存结构: 按照线程是否共享来划分: Heap (堆区) 1. 堆区的介绍 堆是 OOM 故障最主要的发生区域。它是内存区域中最大的一块区域,被所有线程共…...
wordpress
2024年自己建网站的步骤,新手自学建站教程 – 奶爸建站笔记 超详细图解:从 0 搭建一个个人网站,也太简单了吧 - 王一白 - 博客园 如何使用插件或者自定义页面创建一个WordPress着陆页 - 闪电博...
Day33 动态规划part02
62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流,很难想到。 代码随想录 视频讲解:动态规划中如何初始化很重要!| LeetCode:62.不同路径_哔哩哔哩_bilibili class Solution {public int uniquePaths(int m, int n) {int dp[][] = new int[m][n];//初…...
渗透测试之Web基础之Linux病毒编写——泷羽sec
声明: 学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频 (bilibili.com)https://space.bilibili.com/350329294 导读: 时刻…...
jmeter基础07_组件的层级
课程大纲 1. 优先级/执行顺序(一般情况) 同级组件:按组件先后顺序执行。如:同一层的线程组、同一层的http请求。 上下级组件:先执行外层(上级),再执行内层(下级ÿ…...
Nginx反向代理和负载均衡配置
一、疑问 在苍穹外卖里,浏览器发送的请求,比如登录,其url为http://localhost/api/employee/login, 而后端的路径是http://localhost:8080/admin/employee/login 两者不一致,数据是如何准确传输的呢? 二、…...
【379】基于springboot的防疫物资管理信息系统
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装防疫物资管理信息系统软件来发挥其高效地信息处理的作用&am…...
Linux 各个目录作用
刚毕业的时候学习Linux基础知识,发现了一份特别好的文档快乐的 Linux 命令行,翻译者是happypeter,作者当年也在慕课录制了react等前端相关的视频,通俗易懂,十分推荐 关于Linux的目录,多数博客已有详细介绍…...
【Linux】文件操作的艺术——从基础到精通
🎬 个人主页:谁在夜里看海. 📖 个人专栏:《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长,行则将至 目录 📚前言:一切皆文件 📚一、C语言的文件接口 📖1.文件打…...
java中的运算符
大家好,今天来看看java中运算符的一些知识点,理解好运算符是我们在写代码的一大重点,那么我们就来看看吧。 运算符:对操作数进行操作时的符号.,不同运算筹操作的含义不同. 一、算术算片. 1、基本四则运算符:加减乘除模(一*/%) 注意:都是二元…...
全面解析 C++ STL 中的 set 和 map
C 标准模板库(STL)中的关联式容器以其强大的功能和高效性成为开发者解决复杂数据组织问题的重要工具。其中,set 和 map 是最常用的两类关联容器。本篇博客将从基本特性、底层实现、用法详解、高级案例以及性能优化等多个角度,详细…...
css:怎么设置div背景图的透明度为0.6不影响内部元素
目录 1.前言 2.解决思路 3.具体实例 4.另外一种实例 5.总结 1.前言 div背景图为project-bg.png,设置div透明度为0.6;div内的名称、数值受透明度影响颜色显示不正常;怎么设置背景图的透明度为0.6不影响内部元素; 2.解决思路 …...
Kubernetes ConfigMaps
文章目录 简介创建ConfigMaps通过命令行使用字面值创建 ConfigMap。从文件创建ConfigMaps从多个文件创建 ConfigMap从目录创建 ConfigMap使用 YAML 创建 ConfigMap 使用ConfigMaps使用 ConfigMaps作为环境变量使用 ConfigMap 作为卷挂载使用 ConfigMap 中的特定的key ConfigMap…...
前端热门面试题目[一](HTML、CSS、Javascript、Node、Vue、React)
如何设计一个前端页面,实现PC端访问展示Web应用,移动端访问展示H5应用? 为了实现这一功能,通常需要使用响应式设计或者服务器端检测用户设备并返回相应的页面。以下是一些实现方法: 响应式设计:通过CSS媒…...
Swift 宏(Macro)入门趣谈(五)
概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏(Swift Macro)。为此,苹果特地用 2 段视频(入门和进阶)颇为隆重的介绍了它。 那么到底 Swift 宏是什么?有什么用&…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至,他涨红的脸上写满绝望。铁门内秒针划过的弧度,成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定",构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
