管道在Vue和Angular中的作用及React的替代方案

这篇具有很好参考价值的文章主要介绍了管道在Vue和Angular中的作用及React的替代方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

本文主要讲解管道在Vue和Angular中有哪些作用以及React对于管道概念的替代方案是什么。

管道起源

计算机中的Pipline(管道)常被认为起源于Unix,最初Mcllroy发现很多时候人们会将shell命令的输出传递给另一个shell命令,类似于管道。所以就提出了管道的概念。并在1973年实现了这个管道概念,使用|作为pipe的语法符号。此后,很多操作系统也引入了pipe概念,而Angular和Vue框架都引入了这个概念。

管道特点

  • 各个管道高内聚,专注解决某个问题。
  • 多个管道可以组合起来用于解决某个特定的问题

前端中管道概念和作用

概念

VueAngular当中,pipe(管道)更像是一种设计模式,一种思想,它也能体现出函数式编程:利用多个函数组合到一起用于解决某个特定的问题。强调组合大于继承。同时又分为内置管道和自定义管道,内置管道加粗样式就是框架中自己封装好的管道,拿来就可以用的管道。还可以通过自定义的方式自己封装一个管道进行使用。
angular内置管道

DatePipe:根据本地环境中的规则格式化日期。
 UpperCasePipe:字符串全部转换大写。
LowerCasePipe :字符串全部转换成小写。
CurrencyPipe :把数字转换成货币字符串,根据本地环境中的规则进行格式化。
 DecimalPipe:把数字转换成带小数点的字符串,根据本地环境中的规则进行格式化。
PercentPipe :把数字转换成百分比字符串,根据本地环境中的规则进行格式化。

Vue内置管道

capitalize:将字符串的第一个字符转换为大写
uppercase:字符串全部转换大写。
lowercase:字符串全部转换成小写。
currency:把数字转换成货币字符串,根据本地环境中的规则进行格式化。
date:将日期格式化为特定格式

作用

利用一个或者多个管道解决某个问题,比如我们想要一个数据是大写的文本,就可以通过{{ data | UpperCasePipe}}进行格式化,这样获取到的数据就都是大写的了,那同时我们想要定义首字母大写的文本可以通过,创建一个自定义管道FirstUpper,来进行转换,同时这些管道之间也是可以进行组合使用。可以**{{ data | uppercase | lowercase}}**同时使用,那么这时就进行了两个操作,第一是大写,第二是小写,最终获得的就是小写的字符串文本。

React关于管道的替代方案

React本身并没有引入管道的概念,我们知道Angular和Vue是双向数据绑定,它们的符号是{{}},而在react中,所有{}其中的计算的所有内容都是JavaScript,可以通过在{}中调用某个方法来进行操作,如大写toUpperCase(),就可以写{ data.toUpperCase() }所以没有也不需要管道的概念。管道的内容可以直接通过React创建方法并在括号的数据中调用来实现。

Vue和Angular管道的区别

Vue的管道过滤器和Angular用法相同,不同的是Vue中使用filters:{}内部进行管道符的定义。而Angular创建管道过程:

ng g pipe 文件夹名/文件名

Vue创建管道过程::在Vue实例中创建,filters,在filters中创建管道过滤器即可。fitlers中Vue的管道是局部管道,如果不暴露,则无法被其他组件使用,同时Vue引入了全局管道的概念。Angular管道都是暴露的,可以被全局使用。
Vue全局管道定义方式:文章来源地址https://www.toymoban.com/news/detail-758746.html

Vue.filter("过滤器名称", 处理函数 );

到了这里,关于管道在Vue和Angular中的作用及React的替代方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 三大前端技术(React,Vue,Angular)

    React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Red

    2024年02月09日
    浏览(54)
  • vue与react,angular的区别

    Vue.js 作为一个优秀的前端框架,方便前端开发者快速开发应用的前端,在实际项目中使用得比较普遍。 当然 Vue.js 也不是实际项目中唯一的前端框架,比较优秀的前端框架还有 React、AngularJS 和 Angular等。接下来就介绍一下 Vue.js 同这3个框架的对比。 React 和 Vue.js 有许多相似之

    2024年02月06日
    浏览(55)
  • React、Vue和Angular的优缺点

    React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 优

    2024年02月14日
    浏览(47)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 前端开发框架生命周期详解:Vue、React和Angular

    作为前端开发者,掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中,Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期,包括每个阶段的含义、用途以及如何最大限度地利用它们。通过详细的代码示例和实用的技巧

    2024年02月13日
    浏览(53)
  • 一文了解Angular、React 和 Vue.js的区别

    前端开发人员在开始一个新项目时首先要回答的问题是:我应该选择哪个框架? 哪个框架更适合我的需求? 在本文中,我们将向您快速概述当前使用的最常见的前端框架,旨在帮助您选择最能满足您需求的框架。这些框架是 Angular、React和 Vue.js。   一、介绍 Angular是一个包

    2024年02月08日
    浏览(55)
  • Angular React Vue 比较 – 组件篇之内置组件

    本篇文章是组件篇的最后一篇,我们将探讨一下三大框架本身的内置组件。 在 Angular 中并没有内置组件,它只有一些内置指令。 虽然 Angular 官方把指令也称为一种特殊的组件,不过我们还是把指令在另外的篇章中讨论,就不在组件篇里讨论了。 React 提供了一些内置的组件,

    2024年03月16日
    浏览(68)
  • 前端框架之战:React vs Vue vs Angular

    前端框架在现代网页开发中扮演着越来越重要的角色,它们为开发者提供了一种更高效、可扩展的方式来构建复杂的用户界面。在过去的几年里,我们看到了许多前端框架和库的出现,如React、Vue和Angular等。这三个框架分别由Facebook、Google和AngularJS团队开发,它们都是目前最

    2024年02月03日
    浏览(50)
  • 【前端架构】Angular,React,Vue那个是2023的最佳选择?

    当开始一个新的web开发项目时,许多开发人员都有一个问题:“什么工具是最合适的?” 显然,JavaScript是骨干,因为今天它提供了创建前端的广泛功能。但是人们在选择框架时面临着两难,因为JS中有很多框架,而且每个框架都有突出的特性。 通常,争论都是基于三个框架——

    2024年02月16日
    浏览(45)
  • 《React vs. Vue vs. Angular:2023年的全面比较》

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包