基于vue3速学angular

news/2024/6/17 6:19:04

因为工作原因,需要接手新的项目,新的项目是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好像没有这玩意

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 每次销毁指令/组件之前调用。

http://www.mrgr.cn/p/23164611

相关文章

智能农业时代:智能生态网络与数据流通的融合

随着科技的不断进步&#xff0c;智能农业已经成为现代农业发展的重要趋势。智能生态网络&#xff08;IEN&#xff09;作为一种集成化的解决方案&#xff0c;通过整合先进技术和数据要素流通&#xff0c;为智能农业的发展提供了强大的动力。在本文中&#xff0c;我们将探讨IEN在…

codewars check_same_case 题解

题目 编写一个函数来检查两个给定的字符是否大小写相同。 如果任何字符不是字母&#xff0c;则返回-1如果两个字符大小写相同&#xff0c;则返回1如果两个字符都是字母且大小写不同&#xff0c;则返回0 例子 a并g返回1A并C返回1b并G返回0B并g返回00并?返回-1题解 1 此题主…

MGR集群从库出现RECOVERING

一、MGR集群问题 说明&#xff1a; 1、启动MGR集群&#xff0c;发现从库转态是&#xff1a;RECOVERING&#xff0c;导致数据不同步。 2、查看MGR日志报错信息&#xff0c;发现提示从库以存在数据库linux&#xff0c;导致无法创建。 3、报错信息如下图所示&#xff1a; 二、解决…

Prompt Engineering Guide

本文转载自&#xff1a;Prompt Engineering Guide https://www.promptingguide.ai/zh/introduction/basics 文章目录 提示工程简介1、基本概念1&#xff09;基础提示词2&#xff09;提示词格式 2、提示词要素3、设计提示的通用技巧从简单开始指令具体性避免不精确做还是不做&am…

【传知代码】Modnet 人像抠图-论文复现

文章目录 概述原理介绍核心逻辑ModNet 的结构 环境配置WebUI 小结 论文地址 论文GitHub 本文涉及的源码可从Modnet 人像抠图该文章下方附件获取 概述 人像抠图技术在多个领域有着广泛的应用场景&#xff0c;包括但不限于&#xff1a; 展馆互动拍照&#xff1a;展馆中使用的抠…

基于MetaGPT构建单智能体

前言 在之前的文章中&#xff0c;我们详细地描述了Agent的概念和组成&#xff0c;在代码案例中体验了Agent的记忆、工具、规划决策模块&#xff0c;并通过几个Agent框架来加强读者对Agent开发设计与应用的理解&#xff0c;接下来我们就要进入智能体Agent的实际开发中&#xff0…

【JavaEE进阶】——Spring Web MVC (响应)

目录 &#x1f6a9;学习Spring MVC &#x1f388;返回静态网页 &#x1f388;返回数据ResponseBody &#x1f388;返回html代码片段 &#x1f388;返回JSON &#x1f388;设置状态码 &#x1f388;设置Header &#x1f6a9;学习Spring MVC 既然是 Web 框架, 那么当⽤⼾在…

【错误解决】使用HuggingFaceInstructEmbeddings时的一个错误

起因&#xff1a;使用huggingface构建一个问答程序时出现的问题。 错误内容&#xff1a; 分析&#xff1a; 查看代码发现&#xff0c;HuggingFaceInstructEmbeddings和sentence-transformers模块版本不兼容导致。 可以明显看到方法参数不同。 解决&#xff1a; 安装sentenc…

汇编语言(STC89C52)

指令是计算机计算CPU根据人的意图来执行某种操作的命令。一台计算机所执行的全部指令的集合&#xff0c;称为这个CPU的指令系统。而想要使计算机按照人们的要求完成一项工作&#xff0c;就必须让CPU按顺序执行预设的操作&#xff0c;即逐条执行人们编写的指令。这种按照人民要求…

端到端自适应大规模分布式训练技术

端到端自适应大规模分布式训练技术 随着 2020 年 GPT-3 1750 亿超大语言预训练模型的提出,语言、视觉、多模态等领域也随即发布多种超大规模预训练模型,不仅模型参数量越来越大,训练数据量和计算量也相应变大。针对大规模稠密参数模型高效训练问题,飞桨于 2021 年初在业内首…

[协议]stm32读取AHT20程序示例

AHT20温度传感器使用程序&#xff1a; 使用i2c读取温度传感器数据很简单&#xff0c;但市面上有至少两个手册&#xff0c;我这个对应的手册贴出来&#xff1a; main: #include "stm32f10x.h" // Device header #include <stdint.h> #includ…

人类交互2 听觉处理和语言中枢

人类听觉概述 人类听觉是指通过耳朵接收声音并将其转化为神经信号&#xff0c;从而使我们能够感知和理解声音信息的能力。听觉是人类五种感觉之一&#xff0c;对我们的日常生活和交流至关重要。 听觉是人类交流和沟通的重要工具。通过听觉&#xff0c;我们能够听到他人的语言…

php部分特性漏洞学习

php部分函数漏洞学习 简单总结一些我遇到的ctf中的php的一些函数或特性的漏洞&#xff0c;我刷题还是太少了&#xff0c;所以很多例子来自ctfshow&#xff0c;以后遇到相关赛题再更新 1.MD5和其他hash 弱类型比较 php中&#xff0c;有两中判断相等的符号&#xff0c;和&…

Convolutional Occupancy Networks【ECCV2020】

论文&#xff1a;https://arxiv.org/pdf/2003.04618 代码&#xff1a;GitHub - autonomousvision/convolutional_occupancy_networks: [ECCV20] Convolutional Occupancy Networks 图 1&#xff1a;卷积占据网络。传统的隐式模型 (a) 由于其全连接网络结构&#xff0c;表现能力…

JVM运行时内存:垃圾回收器(Serial ParNew Parallel )详解

文章目录 1. 查看默认GC2. Serial GC : 串行回收3. ParNew GC&#xff1a;并行回收4. Parallel GC&#xff1a;吞吐量优先 1. 查看默认GC -XX:PrintCommandLineFlags&#xff1a;查看命令行相关参数&#xff08;包含使用的垃圾收集器&#xff09;使用命令行指令&#xff1a;ji…

云和恩墨海外首秀在吉隆坡召开的2024中国智能科技与文化展览会

作为中马建交50周年官方重点推荐的活动之一&#xff0c;2024中国智能科技与文化展览会&#xff08;第四届&#xff09;于5月20至21日在毗邻吉隆坡双子塔的吉隆坡国际会展中心举办。本次展览会获得马来西亚科学技术创新部、马来西亚通讯部、中国驻马来西亚大使馆和马来西亚中华总…

【文心智能体】创建一个属于自己的生活情感类智能体

文章目录 前言一、创建智能体二、体验 前言 智能体技术的快速发展&#xff0c;进一步激发了各行业开发者对其实际应用及用户需求的深入探索。 创建一个属于自己的智能体。文心一言提供了一个很好的平台。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考…

自主创新助力科技强军,麒麟信安闪耀第九届军博会

由中国指挥与控制学会主办的中国指挥控制大会暨第九届北京军博会于5月17日-19日在北京国家会议中心盛大开展&#xff0c;政府、军队、武警、公安、交通、人防、航天、航空、兵器、船舶、电科集团等从事国防军工技术与产业领域的30000多名代表到场参加。 麒麟信安作为国产化方案…

【因果推断从入门到精通二】随机实验3

目录 检验无因果效应假说 硬币投掷的特殊性何在&#xff1f; 检验无因果效应假说 无因果效应假说认为&#xff0c;有些人存活&#xff0c;有些人死亡&#xff0c;但接受mAb114治疗而不是ZMapp与此无关。在174例接受mAb14治疗的患者中&#xff0c;113/17464.9%存活了28天&…

开源博客项目Blog .NET Core源码学习(25:App.Hosting项目结构分析-13)

本文学习并分析App.Hosting项目中后台管理页面的文章管理页面。   文章管理页面用于显示、检索、新建、编辑、删除文章数据&#xff0c;以便在前台页面的首页、文章专栏、文章详情页面显示文章数据。文章管理页面附带一新建及编辑页面&#xff0c;以支撑新建和编辑文章数据。…