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

# 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 入门教程中&#xff0c;我们已经熟悉了 Vue 的基础语法、数据绑定、指令以及组件化开发等核心概念。在本教程中&#xff0c;我们将进一步探索 Vue 的高级特性&#xff0c;包括过滤器、自定义指令、过渡效果以及 Vue 与后端数据交互等内容&#xff0c;让你能够构建…...

hint: Updates were rejected because the tip of your current branch is behind!

问题 本地仓库往远段仓库推代码时候提示&#xff1a; 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 方头像转为圆图

业务需要把创建海报上的用户头像由方形转为圆形&#xff0c;前端的样式设置不能用。 故采用GD的函数来对方图进行裁剪处理为圆图。 目录 裁剪函数 本地图片 远程图片 效果 参考文章 总结 裁剪函数 从网上找的一个裁剪图片的函数。 代码如下&#xff1a; /* * 将图片切…...

centos 7 离线安装postgis插件

前一段时间记录了下如何在centos7中离线安装postgresql&#xff0c;因为工作需要&#xff0c;我不仅要安装postgresql&#xff0c;还需要安装postgis插件&#xff0c;这篇文章记录下postgis插件的安装过程。 1. 安装前的参考 如下的链接都是官网上的链接&#xff0c;对你安装p…...

pyinstaller打包的时候将ffmpeg也加进包中(包括打包文件夹的方法)

在使用 PyInstaller 打包包含 pydub 的 Python 应用程序时&#xff0c;由于 pydub 需要依赖 ffmpeg&#xff0c;你需要确保 ffmpeg 被正确包含进打包后的程序。以下是操作步骤&#xff1a; 1. 准备 ffmpeg 首先&#xff0c;确保你已经下载并安装了 ffmpeg。可以通过以下方式获取…...

JVM面试知识点1

内存结构&#xff08;掌握内存结构划分、熟知各区域结构功能&#xff09; 经典的JVM内存结构&#xff1a; 按照线程是否共享来划分&#xff1a; Heap (堆区&#xff09; 1. 堆区的介绍 堆是 OOM 故障最主要的发生区域。它是内存区域中最大的一块区域&#xff0c;被所有线程共…...

wordpress

2024年自己建网站的步骤&#xff0c;新手自学建站教程 – 奶爸建站笔记 超详细图解&#xff1a;从 0 搭建一个个人网站&#xff0c;也太简单了吧 - 王一白 - 博客园 如何使用插件或者自定义页面创建一个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

声明&#xff1a; 学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频 (bilibili.com)https://space.bilibili.com/350329294 导读&#xff1a; 时刻…...

jmeter基础07_组件的层级

课程大纲 1. 优先级/执行顺序&#xff08;一般情况&#xff09; 同级组件&#xff1a;按组件先后顺序执行。如&#xff1a;同一层的线程组、同一层的http请求。 上下级组件&#xff1a;先执行外层&#xff08;上级&#xff09;&#xff0c;再执行内层&#xff08;下级&#xff…...

Nginx反向代理和负载均衡配置

一、疑问 在苍穹外卖里&#xff0c;浏览器发送的请求&#xff0c;比如登录&#xff0c;其url为http://localhost/api/employee/login&#xff0c; 而后端的路径是http://localhost:8080/admin/employee/login 两者不一致&#xff0c;数据是如何准确传输的呢&#xff1f; 二、…...

【379】基于springboot的防疫物资管理信息系统

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装防疫物资管理信息系统软件来发挥其高效地信息处理的作用&am…...

Linux 各个目录作用

刚毕业的时候学习Linux基础知识&#xff0c;发现了一份特别好的文档快乐的 Linux 命令行&#xff0c;翻译者是happypeter&#xff0c;作者当年也在慕课录制了react等前端相关的视频&#xff0c;通俗易懂&#xff0c;十分推荐 关于Linux的目录&#xff0c;多数博客已有详细介绍…...

【Linux】文件操作的艺术——从基础到精通

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长&#xff0c;行则将至 目录 &#x1f4da;前言&#xff1a;一切皆文件 &#x1f4da;一、C语言的文件接口 &#x1f4d6;1.文件打…...

java中的运算符

大家好&#xff0c;今天来看看java中运算符的一些知识点&#xff0c;理解好运算符是我们在写代码的一大重点&#xff0c;那么我们就来看看吧。 运算符:对操作数进行操作时的符号.,不同运算筹操作的含义不同. 一、算术算片. 1、基本四则运算符:加减乘除模(一*/%) 注意:都是二元…...

全面解析 C++ STL 中的 set 和 map

C 标准模板库&#xff08;STL&#xff09;中的关联式容器以其强大的功能和高效性成为开发者解决复杂数据组织问题的重要工具。其中&#xff0c;set 和 map 是最常用的两类关联容器。本篇博客将从基本特性、底层实现、用法详解、高级案例以及性能优化等多个角度&#xff0c;详细…...

css:怎么设置div背景图的透明度为0.6不影响内部元素

目录 1.前言 2.解决思路 3.具体实例 4.另外一种实例 5.总结 1.前言 div背景图为project-bg.png&#xff0c;设置div透明度为0.6&#xff1b;div内的名称、数值受透明度影响颜色显示不正常&#xff1b;怎么设置背景图的透明度为0.6不影响内部元素&#xff1b; 2.解决思路 …...

Kubernetes ConfigMaps

文章目录 简介创建ConfigMaps通过命令行使用字面值创建 ConfigMap。从文件创建ConfigMaps从多个文件创建 ConfigMap从目录创建 ConfigMap使用 YAML 创建 ConfigMap 使用ConfigMaps使用 ConfigMaps作为环境变量使用 ConfigMap 作为卷挂载使用 ConfigMap 中的特定的key ConfigMap…...

前端热门面试题目[一](HTML、CSS、Javascript、Node、Vue、React)

如何设计一个前端页面&#xff0c;实现PC端访问展示Web应用&#xff0c;移动端访问展示H5应用&#xff1f; 为了实现这一功能&#xff0c;通常需要使用响应式设计或者服务器端检测用户设备并返回相应的页面。以下是一些实现方法&#xff1a; 响应式设计&#xff1a;通过CSS媒…...

Swift 宏(Macro)入门趣谈(五)

概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏&#xff08;Swift Macro&#xff09;。为此&#xff0c;苹果特地用 2 段视频&#xff08;入门和进阶&#xff09;颇为隆重的介绍了它。 那么到底 Swift 宏是什么&#xff1f;有什么用&…...

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

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

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...