当前位置: 首页 > 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;有什么用&…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...

职坐标物联网全栈开发全流程解析

物联网全栈开发涵盖从物理设备到上层应用的完整技术链路&#xff0c;其核心流程可归纳为四大模块&#xff1a;感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性&#xff0c;例如传感器选型需平衡精度与…...