# 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 宏是什么?有什么用&…...

XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...

2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...

Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...