湖北省建设厅投标报名官方网站,百度帐号申请注册,网站建设需求 百度文库,360官网入口管道在Vue和Angular中的作用及React的替代方案 前言管道起源管道特点 前端中管道概念和作用概念作用 React关于管道的替代方案Vue和Angular管道的区别 前言
本文主要讲解管道在Vue和Angular中有哪些作用以及React对于管道概念的替代方案是什么。
管道起源
计算机中的Pipline… 管道在Vue和Angular中的作用及React的替代方案 前言管道起源管道特点 前端中管道概念和作用概念作用 React关于管道的替代方案Vue和Angular管道的区别 前言
本文主要讲解管道在Vue和Angular中有哪些作用以及React对于管道概念的替代方案是什么。
管道起源
计算机中的Pipline管道常被认为起源于Unix最初Mcllroy发现很多时候人们会将shell命令的输出传递给另一个shell命令类似于管道。所以就提出了管道的概念。并在1973年实现了这个管道概念使用|作为pipe的语法符号。此后很多操作系统也引入了pipe概念而Angular和Vue框架都引入了这个概念。
管道特点
各个管道高内聚专注解决某个问题。多个管道可以组合起来用于解决某个特定的问题
前端中管道概念和作用
概念
在Vue和Angular当中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全局管道定义方式
Vue.filter(过滤器名称, 处理函数 );
