基于Vue快速入门Angular-EW帮帮网

基于Vue快速入门Angular，三大框架介绍

最早期前端工程师岗位是不存在的.服务端人员兼任页面的开发.

之前的项目是前后端不分离的.页面是在服务端数据渲染好,传递到浏览器的.服务端渲染技术jsp,php,各种服务端模板技术.

随之互联网时代到来,客户端和页面得功能需求和效果越来越复杂,前端工程师独立出来了.

服务端当时很多框架[解决方案],前端基本没有框架.前端使用jQuery类库[兼容各种浏览的API写法]

第一款框架 angular Google 2009年
- 取代里jQuery手动操作DOM的方式
- 特点:把服务端的一些工程概念引入移植到前端实现: mvc,依赖注入等
- 随着时间推移,Angular越来越庞大[功能很强大],市场份额被寻求更轻量的React和Vue所逐渐侵蚀

第二款框架 React facebook 2013年
- facebook创新了虚拟DOM,性能上比Angular更好一些
- 兼容了很多新式写法例如: ES6 函数式编程
- 门槛较高,更加灵活

第三款框架 Vue evenyou 2014年
- 个人项目开源借鉴了很多Angular和React特点语法进行了一定的优化
- 更容易上手,更加方便,适合初学者使用
- 网上说法: 大公司都用React,适合大中型项目 Angular适合重型项目,Vue只适合中小型项目.Vue中数据的自动监听器,数据内容较多时,就会影响性能.随着硬件的发展.这些问题就不存在了.

以上三款框架,还是JS框架.打好JS语法功底,是作为前端人员的基本功.

Angular

官网网址:https://angular.cn/

安装生成项目包

安装脚手架

--force 强制安装如果系统中存在旧版本就会直接更新

npm i -g @angular/cli --force

确认脚手架是否安装成功

前端学习教程http://www.mobiletrain.org/study/

生成项目包

注意:执行以下命令,需要在哪儿生成项目包,就在哪个路径下执行

# ng new 项目包名称
ng new ngpro

执行命令后,如果没有特殊设置,一路回车就可以.

如果包下载慢或者无法下载,从以下几个原因查找问题:
①node和npm是否正常
②npm源问题配置国内源 taobao源 tencent源
③创建项目路径不要有中文不要空格不要放在系统盘符
使用cmd命令行,不要用powershell.

启动项目包

进行项目包路径cd ngpro,执行

ng serve --open
# 缩写形式
ng s -o

看到以下界面 Angular项目启动成功.默认端口是4200

在浏览器中输入localhost:4200之后发生了哪些事情?

localhost:4200 Angular项目默认启动服务为4200
服务器默认访问为index.html
app-root是Angular的根组件,脚手架后把main.ts引入到index.html中
main.ts
- ts: TypeScript 是JavaScript超集,对于数据类型有严格的要求.之后还是需要编译称为js执行[浏览器只认识JS].TS对于开发者要求严格,编辑器也会有更友好的提示.
- app.module.ts: 全局配置文件

app.module.ts引入了组件app.component.ts

VScode插件

组件

三大框架中组件的区别:

Vue: 单文件组件 .vue文件 template script style
React: 单文件 .js文件 JSX 样式可以JS对象描述
Angular: 组成组件的文件 .html .ts .css

制作组件的流程

步骤:

一个组件由3个文件组成:ts css html
- html 结构和内容
- css 样式
- ts 负责关联html,css 设置组件名称和调用名称写JS代码

注册:能够使用编写出来的组件在app.module.ts中进行配置
使用:在根组件app.component.html里进行挂载调用

快捷命令

Angular中为了开发者能够快捷的进行开发.把精力放在业务上,对于项目的结构和架构,进行快速的生成.通过这些快捷命令,可以快速的实现一些功能结构.

例如:生成组件结构命令

# 完整写法
ng generrate component 组件名
# 缩写法
ng g c 组件名

创建一个组件

①生成组件文件

建立一个文件夹存储生成的组件

IT学习教程http://www.mobiletrain.org/study/

②引入使用

src\app\app.component.html

<app-myc01></app-myc01>

接下来实现一下吧:

1.在components目录下生成一个One组件,在根组件app.component.html中调用,在浏览器查看组件渲染效果.

2.在components目录下生成一个Two组件,手动创建组件的文件并注册引入,在根组件app.componet.html中调用,在浏览器查看组件渲染效果.

①手动创建文件夹和组件各组成文件

src\app\components\two\two.component.html

<p>我是two组件</p>

src\app\components\two\two.component.ts

// ng-com 快捷代码生成
import { Component, OnInit } from '@angular/core';

// @ 装饰器写法  扩充组件相关功能和配置
@Component({
  // 组件标签名称 调用名称
  selector: 'app-two',
  // 模板页面路径
  templateUrl: './two.component.html',
  // 样式文件路径
  styleUrls: ['./two.component.css']
})
// 类名修改  大驼峰命名  
export class TwoComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

src\app\app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { Myc01Component } from './components/myc01/myc01.component';
import { OneComponent } from './components/one/one.component';
// 1.引入组件
import { TwoComponent } from './components/two/two.component';

@NgModule({
  declarations: [
    AppComponent,
    Myc01Component,
    OneComponent,
    // 2.注册组件  只有app.module.ts配置文件中引入并注册后,组件才可以被调用
    TwoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

根组件引入显示

src\app\app.component.html

<app-two></app-two>

文件的命名规范

官方建议起名能够知名见意看见文件的名称能够知道文件的作用.

名称.作用.类型

app.component.html
- 名称:app
- 作用:组件
- 类型:html 内容标签

app.module.ts 配置文件

语法学习

Vue借鉴了很多Angular的语法,所以两者具有很多相似

插值

Vue: {{}}在html中进行插值

src\app\components\myc01\myc01.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc01',
  templateUrl: './myc01.component.html',
  styleUrls: ['./myc01.component.css'],
})
//implements 实现 接口interface TS特有的概念
//简单理解为类似继承的概念
export class Myc01Component implements OnInit {
  name = 'Angular';
  num = 100;
  bool = true;
  skills = ['angular', 'ionic'];
  obj = { name: 'Angular', msg: 'Angular是一款功能很齐全的框架' };
  constructor() {}

  ngOnInit(): void {}
}

src\app\components\myc01\myc01.component.html

<p>myc01 works!</p>
<!-- 插值 -->
<ul>
  <li>{{ name }}</li>
  <li>{{ num }}</li>
  <li>{{ bool }}</li>
  <li>{{ skills }}</li>
  <li>{{ skills[1] }}</li>
  <li>{{ obj }}</li>
  <li>{{ obj.msg }}</li>
  <!-- {{}} JS代码范围  -->
  <!-- 算数运算 -->
  <li>{{ num + 1 }}</li>
  <li>{{ num - 1 }}</li>
  <li>{{ num * 2 }}</li>
  <li>{{ num / 2 }}</li>
  <li>{{ num % 3 }}</li>
  <!-- 比较运算符 返回值为bool -->
  <li>{{ num > 10 }}</li>
  <li>{{ num < 10 }}</li>
  <li>{{ num <= 10 }}</li>
  <li>{{ num >= 10 }}</li>
  <li>{{ num != 10 }}</li>
  <li>{{ num == 10 }}</li>
  <li>{{ num === 10 }}</li>
  <!-- 逻辑运算符 -->
  <!-- 与 &&  或 ||  非 ! -->
  <!-- && 全为真 则为真  有假则全假 -->
  <li>{{ true && true }}</li>
  <li>{{ true && false }}</li>
  <li>{{ false && false }}</li>
  <!-- || 有真则为真  全假则假 -->
  <li>{{ true || true }}</li>
  <li>{{ true || false }}</li>
  <li>{{ false || false }}</li>
  <!-- ! 取反  非真即假  非假即真 -->
  <li>{{ !true }}</li>
  <li>{{ !false }}</li>
  <!-- {{}} 也可以使用一些函数 -->
  <li>{{ name.replace("A","a")}}</li>
  <!-- 三元 -->
  <li>{{bool?'真的':'假的'}}</li>
</ul>

属性绑定

Vue中 : v-bind:属性名="值" 或者 :属性名="值"

生成新的组件:ng g c myc02 创建之后记得在app.component.html里调用它

src\app\components\myc02\myc02.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc02',
  templateUrl: './myc02.component.html',
  styleUrls: ['./myc02.component.css']
})
export class Myc02Component implements OnInit {
  img = 'http://www.codeboy.com:9999/img/index/banner1.png'
  constructor() { }

  ngOnInit(): void {
  }

}

src\app\components\myc02\myc02.component.html

<p>myc02 works!</p>
<!-- 
   vue :src="img"
   ng [src]="img"
 -->
<!-- 推荐写法 -->
<img width="200" [src]="img" alt="" />
<br />
<!-- 插值写法 不推荐写法-->
<img width="200" src="{{ img }}" alt="" />

事件绑定

Vue: v-on:事件名="方法名" 或者 @事件名="方法名"

生成新的组件:ng g c myc03

src\app\components\myc03\myc03.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc03',
  templateUrl: './myc03.component.html',
  styleUrls: ['./myc03.component.css'],
})
export class Myc03Component implements OnInit {
  name = '皮卡丘';
  show() {
    // angular 中事件触发的普通方法 this不丢失
    alert('事件被触发,我是' + this.name);
  }
  constructor() {}

  ngOnInit(): void {}
}

src\app\components\myc03\myc03.component.html

<p>myc03 works!</p>
<!-- 
  vue @click="show"
  ng (click)="show()"
  注意绑定方法需要加()结尾
 -->
 <!-- ng-click 快捷语法 -->
<button (click)="show()">点击触发</button>

双向数据绑定

Vue: <input v-model="变量">

在Angular中双向绑定属于表单模块,需要在全局配置文件[/src/app/app.module.ts]中,提前引入并注册表单模块[FormsModule].否则不能够使用

创建新组建 ng g c myc04

src\app\components\myc04\myc04.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc04',
  templateUrl: './myc04.component.html',
  styleUrls: ['./myc04.component.css']
})
export class Myc04Component implements OnInit {
  uname=""
  constructor() { }

  ngOnInit(): void {
  }

}

src\app\components\myc04\myc04.component.html

<p>myc04 works!</p>
<!-- 
   Vue v-model语法糖  v-bind和v-on的结合
   ng [(ngModel)]  []属性绑定  () 事件绑定
 -->
 <!-- ng-model 快捷提示 -->
 <!-- 注意:双向绑定语法属于Form模块,一定要在全局配置文件引入,并注册才可以使用 -->
<input type="text" [(ngModel)]="uname" />
<br/>
<!-- 渲染查看 -->
用户名:{{uname}}

样式

Vue:

style: <el :style="{属性名:值,属性名:值,...}">
class: <el :class="{类名:表达式或者bool值}">
表达式为真则类名绑定为假则不绑定

生成组件:ng g c myc05

src\app\components\myc05\myc05.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc05',
  templateUrl: './myc05.component.html',
  styleUrls: ['./myc05.component.css'],
})
export class Myc05Component implements OnInit {
  size = 18;
  changeSize() {
    this.size++;
  }
  constructor() {}

  ngOnInit(): void {}
}

src\app\components\myc05\myc05.component.html

<p>myc05 works!</p>
<button (click)="changeSize()">字体变大{{ size }}</button>
<!-- ng-style快捷 -->
<!-- ng-class快捷 -->
<div
  [ngStyle]="{ fontSize: size + 'px' }"
  [ngClass]="{ success: size > 22 && size < 30, danger: size > 30 }"
  style="padding: 10px;"
>
  Hello Angular!
</div>

网页内容

在页面中插入html

Vue: <div v-html="html代码"></div>

创建组件:ng g c myc06

src\app\components\myc06\myc06.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc06',
  templateUrl: './myc06.component.html',
  styleUrls: ['./myc06.component.css']
})
export class Myc06Component implements OnInit {
  data = "<h1>Hello Angular!</h1>"
  constructor() { }

  ngOnInit(): void {
  }

}

src\app\components\myc06\myc06.component.html

<p>myc06 works!</p>
<!-- {{data}} -->
<!-- 
  Vue v-html
  ng [innerHTML]
  {{}} 相当于js的innerText
 -->
 <div [innerHTML]="data"></div>

条件渲染

Vue:

<el v-if="条件" />
<el v-else-if="条件" />
<el v-else />

新建组件:ng g c myc07

src\app\components\myc07\myc07.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc07',
  templateUrl: './myc07.component.html',
  styleUrls: ['./myc07.component.css'],
})
export class Myc07Component implements OnInit {
  score = 60;
  // TypeScript javascript超集 数据类型有限制 参数必须声明类型
  // any 任意类型 不限制
  changeScore(num:number) {
    this.score += num;
  }
  constructor() {}

  ngOnInit(): void {}
}

src\app\components\myc07\myc07.component.html

<p>myc07 works!</p>
<!-- 分数范围为0-100 -->
<div>考试分数:{{ score }}</div>
<!-- ng-if 快捷生成语法 -->
<!-- *ngIf 满足条件 则渲染显示 -->
<button *ngIf="score > 0" (click)="changeScore(-10)">减10分</button>
<button *ngIf="score < 100" (click)="changeScore(+10)">加10分</button>
<!-- if-else: 写起来比较繁琐 一般不怎么使用 -->
<div>
  <!-- ng-if-else 生成结构语法 -->
  <ng-container *ngIf="score >= 60; else elseTemplate">
    <b style="color: green">及格了</b>
  </ng-container>
  <ng-template #elseTemplate>
    <b style="color: red">不及格</b>
  </ng-template>
  <!-- <b *ngIf="score>=60" style="color: green">及格了</b>
  <b *ngIf="score<60" style="color: red">不及格</b> -->
</div>

显示/隐藏

Vue:
v-show 也可以实现元素显示/隐藏
面试题: v-if和 v-show的区别?
答:
v-if 通过判断条件 ,确定DOM是否渲染 操作DOM进行删除和添加元素
适合非频繁的操作.例如:网络请求数据没有加载完毕前不渲染
v-show通过 css的display属性控制元素是否显示.性能效果较低.
适合已经展示内容频繁显示/隐藏操作. 切换

新建组件:ng g c myc08

src\app\components\myc08\myc08.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc08',
  templateUrl: './myc08.component.html',
  styleUrls: ['./myc08.component.css'],
})
export class Myc08Component implements OnInit {
  score = 60;
  changeScore(num: number) {
    this.score += num;
  }
  constructor() {}

  ngOnInit(): void {}
}

src\app\components\myc08\myc08.component.html

<p>myc08 works!</p>
<div>分数:{{score}}</div>
<!-- Vue中  v-show满足条件显示 -->
<!-- ng中  [hidden] 满足条件隐藏 -->
<!-- ng-hide 快捷生成 -->
<div>
  <button [hidden]="score <=0"  (click)="changeScore(-10)">减10分</button>
  <button [hidden]="score >=100"  (click)="changeScore(+10)">加10分</button>
</div>

本文含有隐藏内容，请开通VIP 后查看

基于Vue快速入门Angular