基于vue3速学angular

2024-05-28 09:36

本文主要是介绍基于vue3速学angular,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因为工作原因,需要接手新的项目,新的项目是angular框架的,自学下和vue3的区别,写篇博客记录下:
参考:https://zhuanlan.zhihu.com/p/546843290?utm_id=0

1.结构上:

vue3:一个vue文件,包括了html ts css
angular:至少需要三个文件,分别写html ts css文件写法如下:XXXXX.component.html

在这里插入图片描述
代码核心部分是ts文件里面的@Component,这里的功能是抛出了当前这个组件的调用名称 并且导入了html 和 css文件

@Component({// 组件标签名称 调用名称selector: 'xxxx-target',// 模板页面路径templateUrl: './xxxx-target.component.html',// 样式文件路径styleUrls: ['./xxxx-target.component.less']
})

2.html写法上,可以看到angular写法里面有很多括号[] (),那具体是干什么用的呢

vue写法

<button v-if="isShow" class="test-button" @click="onClick" :title="buttonTitle">{{ '1111' }}</button>
<input v-else type="text" v-model="name" />
<div v-for="(item,index) in cardList"></div>
<div v-show="isShow"></div>
<div :class="{ 'disabled': disabled, 'un-hover': true}" :style="{ color: color }"></div>
<div>    <slot></slot>  <slot name="icon"></slot> </div>

angular写法

<button *ngIf="isShow" class="test-button" (click)="onClick()" [title]="buttonTitle">{{ '1111' }}</button>
<input #elseTemplate type="text" [(ngModel)]="name" />
<div *ngFor="let item of cardList;let i = index"></div>
<div [hidden]="isShow"></div>
<div [ngClass]="{ 'disabled': disabled, 'un-hover': true}" [ngStyle]="{ color: color }"></div>
<div>    <ng-content></ng-content>  <ng-content select="[icon]"></ng-content> </div>

可以很轻松的看出差异
@click=>(click) 注意,vue里面可以隐藏函数的括号,angular必须加
:title=>[title]
v-model=>[(ngModel)]
v-if=>*ngIf
v-else=>#elseTemplate
v-for=>*ngFor 注意,angular的index需要let i = index写,然后下面用i来当index用
v-show=>[hidden]
:class=>[ngClass]
:style=>[ngStyle]
slot=>ng-content 注意,angular的插槽用的是select=“[xxx]”

插槽使用方式区别

<div-xxx><template #icon><div class="tips"></div></template></div-xxx>
差别就是angular不需要套一层template,如果是icon插槽增加一个icon属性即可
<div-xxx><div icon><div class="tips"></div></div></div-xxx>

3.ts写法上:
先来几个最常用的,子和父如何通讯的
angular:

在Angular组件之间共享数据,有以下几种方式:
1. 父组件至子组件: 通过 @Input 共享数据
2. 子组件至父组件: 通过 @Output EventEmitter 共享数据
3. 子组件至父组件: 通过 本地变量共享数据
4. 子组件至父组件: 通过 @ViewChild 共享数据
5. 不相关组件: 通过 service 共享数据,
缓存、广播等

下面用代码看下和vue3的区别

vue3写法

子组件:
<template><button  @click="onClick" loading="loading" {{ $t('refresh') }}</button>
</template>
<script lang="ts" setup>
const emit = defineEmits(['on-click']);
const props = defineProps({loading: { type: Boolean, default: true },
});const onClick = () => {emit('on-click');
};
</script>
父组件:
<template><button-XXXX  @onClick="onRefresh" :loading="xxxLoading"/>
</template>
<script lang="ts" setup>
const xxxLoading= ref(false);
const onRefresh= async() => {xxxLoading.value=true;// 执行函数await XXX();xxxLoading.value=false;
};
</script>

angular写法:

子组件:
@Component({selector: 'xxx-button',template: `<button (click)="onClick(true)">{{buttonName}}</button>`,
})
export class xxxComponent implements OnInit{@Output() vote = new EventEmitter<any>();@Input() buttonName: any;constructor() {}ngOnInit(): void {}onClick(isAdd:boolean): void {this.vote.emit(isAdd);}
}
父组件:
@Component({selector: 'xxx-div',template: `<xxx-button [buttonName]="buttonName" (vote)="onVote($event)"></xxx-button>`,
})
export class xxxComponent {buttonName="按钮名称";constructor() {}onVote(isAdd:boolean): void {if(isAdd){//具体操作}}
}

那么vue里面的父通过ref访问子组件,在angular要怎么实现呢,如下,只需要在父组件ts代码里面写@ViewChildren(‘xxx’) xxx ,然后在html子组件里面加上#xxx就行

@Component({selector: 'xxx-div',template: `<xxx-button #test1 [buttonName]="buttonName" (vote)="onVote($event)"></xxx-button>`,
})
export class xxxComponent {@ViewChildren('test1') test1;buttonName="按钮名称";constructor() {}onVote(isAdd:boolean): void {if(isAdd){//具体操作console.log('test1',test1)}}
}

监听事件:
vue3里面有watch watcheffet,我研究了下angular的,好像只有类似watcheffet的监听方法
需要监听的参数写在ngOnChanges里面的changes.XXX 当这个值变化的时候会触发

vue3写法

watch(() => props.isOpen,(value) => {console.log(value)},{ deep: true, immediate: true }
);watchEffect(() => {visible.value = props.show;
});

angular写法

  @Input() xxxDeatail;ngOnChanges(changes: SimpleChanges): void {// xxxDeatail 属性值变更时if (changes.xxxDeatail) {this.initDeatail();}}initDeatail(){}

计算属性
angular好像没有这玩意,只有个@pipe管道的东西,相当于写一个公共方法,用用挺麻烦,比如计算时间展示,或者复杂数据,重复操作的时候可以用到,感兴趣可以搜下

下面是个简单demo 主要看下用法,很多代码都省略了

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'boolToString',
})
export class BoolToStringPipe implements PipeTransform {transform(value: boolean, trueValue: string, falseValue: string): unknown {return value ? trueValue : falseValue;}
}

用的时候:

import { BoolToStringPipe } from 'boolToString.pipe';@Component({providers: [BoolToStringPipe ],
})
export class PatchUpgradeComponent implements OnInit {constructor(private boolToStringPipe : BoolToStringPipe ) {}getData(){this.boolToStringPipe.transform(true,'111','222');}
}

4.生命周期上
angular:

ngOnChanges:当 Angular 设置或重新设置数据绑定的输入属性时响应。时间上位于OnInit之前。初始化和值发生变化时调用。
ngOnInit:用于初始化页面内容,只执行一次。时间上位于OnChanges之后。
ngDoCheck:每次变更检测时执行,并会在发生Angular自己本身不能捕获的变化时作出反应。紧跟在ngOnChanges 和 ngOnInit钩子之后执行。慎用。
ngAfterContentInit:当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。第一次 ngDoCheck 之后调用,只调用一次。
ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令中的内容之后调用。ngAfterContentInit和每次 ngDoCheck之后调用。
ngAfterViewInit:当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked之后调用,只调用一次。
afterViewChecked:每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。ngAfterViewInit和每次 ngAfterContentChecked 之后调用。
ngOnDestroy:每当 Angular 每次销毁指令/组件之前调用。

5.实际开发中遇到的和vue的不同
自定义组件库不能如下写

<xxx-div />

必须这么写

<xxx-div></xxx-div>

ngif等等里面不能放函数 find findIndex等等,如下会报错,includes可以用

<div *ngIf="data.find(v=>v.id==='123')"></div>

写vue3的时候,进入界面的函数操作都是放在 onMounted 里面的,
写angular的时候,需要都放在 ngAfterViewInit() 里面才行,不能放在 ngOnInit() 里面,因为这个时候dom还没加载,读取dom的操作会报错

这篇关于基于vue3速学angular的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1010189

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求