事关我个Vue开发转Angular的那些事一

陈小夫子
643 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

写在前面: 入职新公司，用的是angular框架，学呗那就，听说vue和angular相似度还是有一点的，不像react差异那么大，那就直接开始吧.

事关我个Vue开发转Angular的那些事一

Vue和Angular那些事

Angular

angular之前是叫angular.js，angularJs诞生于2009，angular诞生于2016,自从老早拥抱TS之后，为了和之前版本做区分，从Angular2开始就去掉后缀了，一直到现在最新发布的angular13。

Vue

Vue是尤大及其团队开发及负责维护的一个渐进式框架，主要由中国人开发以及天生中文文档，上手简单易扩展，2021年vue3版本已成为默认版本，vue3默认TS配置文件以及CompositionAPI，如果说vue2是为了给初学者降低开发门槛的话，那vue3版本则是给予大牛们更自由的开发体验。

Angular文档知识点

根模块

import { NgModule } from '@angular/core'; //装饰器
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; 

@NgModule({
    imports: [ BrowserModule ],  //imports数组中应该只有NgModule类。不要放置其它类型的类。
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

NgModule

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

  • declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
  • exports - declarations 的子集，可用于其它模块的组件模板。
  • imports - 本模块声明的组件模板需要的类所在的其它模块。
  • providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
  • bootstrap - 主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

组件

ng中一个组件创建一个目录，里面一般有三个文件，xxx.html(模板代码)，xxx.scss(样式文件)以及xxx.ts(组件逻辑)

html常用语法写法

  • 属性绑定,动态class，数据双向绑定，for循环，事件绑定，插值表达式。
   <div
   [disabled]="isUnchanged"
   [ngClass]="{
       selected: objectType.objectTypeId == selected
   }"
   [(ngModel)]="objectText"
   *ngFor="let objectTyle of filterObjectTypes; let idx = index"
   (click)="getObjectList(objectType.objectTypeId)"
   (change)="changeType()"
   >
   {{objectType.objectTypeName}}
   </div>
   
   // 条件类名
    <div [class]="{'active':isActive}"></div>
    // 多重条件类名
    <div [class]="['d-flex',{'active':isActive}]"></div>
  • if条件判断
// 简写
   <button *ngIf="someCondition; else otherBtn">
       An action 
   </button> 
   
   <ng-template #otherBtn>
       <button>
       Another action 
       </button> 
   </ng-template>
   
// 方式二
<ng-container *ngIf="someCondition; then templateA; else templateB">
</ng-container>

<ng-template #templateA> 
    <p>Some text</p> 
    <button>An action</button> 
</ng-template> 

<ng-template #templateB> 
    <p>Some other text</p> 
    <button>A different action</button> 
</ng-template>
  • ngSwitch条件判断

类似于vue中的if else-if else-if else的作用,条件二选一变成条件n选一

  • for循环遍历
<div *ngFor="let hero of heroes; let i=index; trackBy:trackByHeroes">
    ({{hero.id}}) {{hero.name}}
</div>

- index  数据的索引
- first  是否为数据的第一条
- last   是否为数据的最后一条
- odd    是否具有奇数索引
- even   是否具有偶数索引

管道操作符(过滤器 | )

在数据进行渲染显示之前,额外再对数据做一点处理或者转换,如文字统一大小写,数字变成带rmb符号等场景 - 管道是一个逻辑函数,相当于传入一个参数,进行逻辑处理之后再return结果出来 - 多个管道符可以共同使用 - 可以传入参数


<div>
    Title through a pipe chain:{{title | uppercase | lowercase}}
</div>


<div>
    Birthdate: {{currentHero?.birthdate | date:'longDate'}}
</div>

安全导航操作符(?.)

用来保护在属性路径中,出现 null 和 undefined 值而导致崩溃

To Be Continue

avatar
文章
阅读
粉丝