vue,react,angular三大web前端流行框架簡單對比

經常使用的到的網站

vue學習庫：

https://github.com/vuejs/awesome-vue#carousel

(json數據的格式化，提升本地測試的效率)

json在線編輯：

http://www.bejson.com/
http://www.kjson.com/

//提供fake的數據:
http://jsonplaceholder.typicode.com/users

/posts 100 posts
/comments 500 comments
/albums 100 albums
/photos 5000 photos
/todos 200 todos
/users 10 users

https://github.com/gdi2290/awesome-angular

PC:
https://material.angular.cn/
https://ng.ant.design/docs/introduce/zh
Mobile:
ionic

ionicframework.com
ionicframework.com/docs
ionicons.com

React:
https://reactjs.org/ 官網
https://github.com/enaqx/awesome-react 基於React的第三方庫

Flutter Google所推出的一個構建移動端原生app的框架 flutter.io

https://github.com/jondot/awesome-react-native#ui 基於ReactNative的第三方的工具庫

封裝:提到代碼的複用率、提升開發效率、方便代碼的維護和升級

零、回顧
VueJS:漸進式的js框架
vue核心庫 vueRouter vuex
vue插件 plugin vue.use()

Vue生態系統?
vuejs+vueRouter+vuex+Element/Mint+weex(原生開發)+vux(移動端的ui組件庫)

①Vue基礎語法 指令
{{expression}}
v-for v-if v-else
v-on @
v-bind :
v-model
②Vue 路由模塊(創建組件和url之間的映射關係)
路由基本使用:
引入對應的模塊
router-view
完成組件的建立和引入
配置路由詞典(路由對象構成的數組)
導航:
this.$router.push()
this.$router.forward()
this.$router.back()
this.$router.go(n)
<router-link to=""></router-link>
傳參:
明確發送方和接收方

配置接收方的路由地址 /detail/:id this.$route.params

發送
this.$router.push('/detail/1')
路由嵌套:
mail
步驟1：mail指定一個router-view
步驟2：在mail對應的路由對象配置子路由
{
path:'/mail',
component:Mail,
children:[

]
}
路由守衛
③Vue 網絡請求
axios.get/post/**().then()
④Vue 組件間通訊
props down (父--》子)
events up (子--》父)
bus
ref
$parent
⑤vuex
state
getters
mutations
actions
modules

1、Angular概述
what
One framework.Mobile & desktop.
是一個js的框架，實現移動端和pc端的開發
Angular 是一個用 HTML 和 TypeScript 構建客戶端應用的平臺與框架。 Angular 自己使用 TypeScript 寫成的。它將核心功能和可選功能做爲一組 TypeScript 庫進行實現，你能夠把它們導入你的應用中。
when
SPA(single page application)
why
技術團隊Google

typescript是一種強類型檢查機制的語言

angular涉及到的內容不少，減小開發者的開發壓力
how
組件定義視圖。視圖是一組可見的屏幕元素，Angular 能夠根據你的程序邏輯和數據來選擇和修改它們。 每一個應用都至少有一個根組件。

組件使用服務。服務會提供那些與視圖不直接相關的功能。服務提供商能夠做爲依賴被注入到組件中， 這能讓你的代碼更加模塊化、可複用，並且高效。
(command line interface)
Angular CLI是一個命令行界面工具，它能夠建立項目、添加文件以及執行一大堆開發任務，好比測試、打包和發佈。
npm i -g @angular/cli 全局安裝cli工具
ng new my-app 建立一個叫作my-app的項目
cd my-app 進入到當前目錄下的my-app目錄中
ng serve 啓動開發服務器

準備ng的使用環境:
①拷貝.bin目錄
C:\xampp\htdocs\framework\ng\myngapp\node_modules\.bin
②計算機，鼠標右鍵點擊，選中屬性
③選中高級系統設置
④選中環境變量
⑤系統變量中的path，編輯
⑥新建，粘貼

npm start 啓動流程:
執行根模塊 app.module.ts,經過bootstrap屬性指定了啓動的根組件 app.component.ts
在根組件中 有一個模塊 app.component.html
index.html-->根組件中 經過selector屬性所指定的app-root

啓動開發服務器
npm start

2、組件的建立和調用
組件：可被反覆使用的，帶有特定功能的視圖

Vue組件:
//全局組件
Vue.component('',{
template:``，
components:{
//局部組件
'my-test':{
}
}
})

一、建立
ng generate component demo01
ng g component demo02
二、用
src/app/app.component.html
<app-demo01></app-demo01>


組件自己的注意事項:
①在經過cli去建立組件時，會在src目錄下建立一個文件夾，該文件夾建立4個文件
②自動的app.module.ts幫助註冊這個組件

使用注意:
①npm start 啓動開發服務器
②ng node不識別
重裝nodejs
③ng的環境變量在cmd.exe是能夠識別的，可是在powershell中沒法解析
統一使用cmd.exe
windows+R-->cmd-->cd 工程的目錄

3、Angular基本語法
一、裝飾器、元數據(瞭解)
裝飾器(decorator) 是用來描述當前這個類
元數據(metaData) 使用來告訴Angular框架如何來處理當前這個類

@Component
selector 做爲標籤用的名稱(選擇器)
templateUrl 模板內容
styleUrls 當前引用的樣式類文件
@NgModule
bootstrap
declarations
imports
providers

二、{{}}

三、常見內部指令（重點）
3.1 循環
<any *ngFor="let tmp of list"></any>
<any *ngFor="let tmp of list;let myIndex=index"></any>

3.2 條件
<any *ngIf="expression"></any>

注意事項:
①*ngFor和*ngIf不能同時使用在一個標籤中，藉助於ng-containter

3.3 屬性綁定
<any [屬性]="expression"></any>

3.4 事件綁定
<any (事件名稱)="事件處理函數()"></any>

3.5 雙向數據綁定（根模塊依賴於FormsModule）
基本用法:
<any [(ngModel)]="變量"></any>

檢測模型數據的變化:
<any [(ngModel)]="變量" (ngModelChange)=""></any>

3.6 樣式綁定 樣式類的綁定
:style="{fontSize:mySize}"
:class="{myClass:expression}"

[ngStyle]="{color:myColor}"
[ngClass]="{myClass:true/false}"

四、建立自定義指令(難點)
複習:
Vue.directive('test',{

})

指令: 獲取元素，擴展功能
組件的本質 就是帶有模板的指令

4.1 封裝一個指令類
ng g component **
ng g directive test

4.2 調用一個指令類
調用以前 在根模塊中的declarations數組中先聲明!

進階知識：
①如何獲得調用當前指令的元素?
ElementRef
步驟1:引入
import {ElementRef} from '@angular/core'
步驟2:實例化
constructor(private ef:ElementRef){}
步驟3:獲取元素
this.ef.nativeElement
②如何獲取調用指令時 所傳遞的參數
import {Input,OnInit} from '@angular/core'

export class TestDirective implements OnInit{
@Input() AppTest=""

ngOnInit(){
//this.AppTest
}
}

目標：
<h2 **="red"></h2>
接收到值，將當前調用指定的元素的背景色 設置爲和參數相同的值

步驟1：完成指令的建立 和調用
ng g directive change-bg

步驟2：傳參、接收
Input OnInit
步驟3: 獲取調用指令的元素
ElementRef

五、常見內部管道(過濾器)
回顧:
Vue.filter('',(arg1)=>{return 處理後的結果})

<any>{{expression | myFilter(1,2)}}</any>

管道:目的是將程序原始數據，進行篩選、過濾、格式化的處理，本質:有參數有返回值的方法

用法:
<any>
{{expression | myPipe:arg1:arg2}}
</any>
注意事項:
管道在調用時 所支持的參數的個數和類型

具體管道:
①currency (將一個數字進行貨幣的格式化)
<any>{{123 | currency:'CNY'}}</any>
②percent (將數字轉換爲百分比的形式)
<any>{{0.31223432 | percent:'2.3-4'}}</any>
③uppercase/lowercase(大小寫的轉換)
<any>{{"John"|uppercase/lowercase}}</any>
④number(將數字進行格式化處理)
<any>{{31.223432 | number:'2.3-4'}}</any>
⑤slice
將數組或者字符串進行截取的處理
<any>{{expression | slice:5:10}}</any>

六、建立自定義管道
ng g pipe sex

import {Pipe,PipeTransform} from '@angular/core'

@Pipe({
name:'myCurrrency'
})

export class MyCurrencyPipe implements PipeTransform{
transform(value:any,args?:any){
//獲取value（豎槓前邊表達式執行的結果）
//args（冒號後邊的參數）
//對數據和參數進行處理
//返回處理後的結果
}
}

調用以前:
在app.module.ts中declarations註冊下當前的管道類
調用:
用法和內置的管道用法是同樣的!

七、完成服務類的建立和使用（重點）
服務類：在Angular中 建議你們將經常使用的功能封裝在服務類中 ，好比像網絡通信、數據某些處理、日誌處理。。

7.1 建立
ng g service my-log

關鍵詞:
@Injectable(
{
providedIn:'root'
}
)

7.2 調用
組件是服務類的最大消費者

import {MyLogService} from '../my-log.service'

constructor(private myService:MyLogService)

this.myService.**

7.3 DependencyInjection（依賴注入）
依賴注入（DI）是用來建立對象及其依賴的其它對象的一種方式

在建立要用到的類的對象時，依賴無需理會，將注意力放在要關心的對應的類。

4、組件間通訊(重點)
回顧Vue:
props down：
myName ='zhangsan'
<son :sonName='myName'></son>
<son sonName='zhangsan'></son>

Vue.component('son',{
props:['sonName']
//this.sonName
})
events up:
父(接收方):
rcvMsg(msg){}
<son @myEvent="rcvMsg"></son>
<son @myEvent="rcvMsg($event)"></son>
子(發送方): this.$emit('myEvent',123)
bus：
var bus = new Vue();
//綁定
bus.$on('',(msg)=>{})
//觸發
bus.$emit('',123)

1 props down(父--data--》子)
在調用子組件時，藉助於屬性給子組件進行傳值
步驟1：傳值
loginValue = true;
<son [isLogin]='loginValue'></son>
<son isLogin='true'></son>
步驟2：接收
到子組件中，準備接收:
import {Input} from '@angular/core'
@Input() isLogin=false;
this.isLogin

練習:(:- 16:45)
demo11-parent(只調用子組件)
demo11-son(只有一個無序列表)
需求：在根組件中 調用demo11-parent組件類；在demo11-parent中調用demo11-son組件
步驟1：完成組件類的常見和調用
步驟2：在demo11-parent組件中 聲明一個數組list=[100,200,300]；調用demo11-son時經過自定義屬性myList將數組傳遞子組件
步驟3：demo11-son接收到屬性myList對應的值；在無序列表中 將接收到的數組遍歷建立多個列表項

2 events up(子---data---》父)
步驟1：事件的綁定
rcvMsg(msg){
//msg就是子組件傳來的數據
}
<son (rcvEvent)="rcvMsg($event)"></son>
步驟2：事件的觸發
import {Output,EventEmitter} from '@angular/core'

@Output() rcvEvent = new EventEmitter()

this.rcvEvent.emit(123)

5、網絡請求
默認的核心模塊是不包含網絡請求模塊，
得讓模塊依賴於網絡請求模塊(HttpClientModule)

擴展:
設計原則:
高內聚低耦合

SRP單一責任原則(儘量的將方法、模塊進行劃分，避免出現一個文件或者一個方法幹了n多件事)
OCP開閉原則（對擴展開放 對修改關閉）

設計模式:
http://www.runoob.com/design-pattern/design-pattern-tutorial.html
工廠模式、單例模式、觀察者模式、訂閱者模式、MVC、MVVM、MVP


面試題:異步數據處理的方式?
ajax
promise
async/await
callback
rxjs:觀察者模式、訂閱者模式

步驟1:根模塊依賴於HttpClientModule
app.module.ts
import {HttpClientModule} from '@angular/common/http'
@NgModule({
imports:[HttpClientModule]
})
步驟2:根模塊的任何一個組件均可以調用網絡請求
import {HttpClient} from '@angular/common/http'

constructor(private myHttp:HttpClient){}
//observable subscribe
this.myHttp.get("").subscribe((result)=>{
//result就是服務器端返回的數據
})

請求本地的服務:
①找到文件夾C:\xampp\htdocs\dd\xz
②經過編輯器打開該目錄下的app.js
③修改容許跨域訪問的域的端口:4200
④啓動app.js :node app.js
⑤localhost:3000/index

網絡請求注意事項:
①要請求的url地址不能寫錯
②參數的個數和類型不能出錯
③若是前端確實沒問題，檢查後臺返回的數據是否正確

6、路由模塊 （RouterModule）
路由模塊：創建組件和url之間的映射關係

能夠將路由的配置單獨的放在一個自定義模塊中，讓根模塊依賴於自定義模塊

一、基本用法
步驟1：建立一個自定義的模塊(將路由的配置都統一的放在該文件)
①ng g module app-routing --flat --module=app
②app-routing.module.ts
import {RouterModule,Routes} from '@angular/router'

@NgModule({
exports:[RouterModule]
})

步驟2：指定一個盛放組件的容器
<router-outlet></router-outelt>

步驟3：建立要用到的組件
ng g component **

步驟4：配置和調用路由詞典
app-routing.moduel.ts

const myRoutes:Routes = [
{path:'',component:**}
]

@NgModule({
imports:[
RouterModule.forRoot(myRoutes)
]
})

步驟5：測試
http://localhost:4200
http://localhost:4200/register

注意事項:
① 路由地址不能以/開頭
② 路由地址的異常處理:path:'**'

練習:(:- 14:30)
需求:建立一個SPA(single page application),有兩個組件：demo17-list(路由地址爲空),demo17-detail(路由地址爲detail)
步驟1:建立兩個組件
步驟2:配置路由
步驟3:在demo17-list組件中，發起網路請求(HttpClient)
http://localhost:3000/products?kw=i5&pno=0
將服務端返回的數據的data對應的數組，顯示在無序列表(列表項顯示商品的title)
步驟4：在demo17-detail組件中，顯示h2:這是詳情頁

二、導航
回顧:Vue
this.$router.push()
<router-link to="/detail">跳轉到詳情頁</router-link>

Angular：
方案1：編程式導航
Router類中 navigateByUrl
import {Router} from '@angular/router'

constructor(private myRouter:Router){}

this.myRouter.navigateByUrl('目的地的路由地址')

方案2：
<any routerLink="oc"></any>

三、傳參(跳轉到某一個路由地址的時候，捎帶了些數據)
回顧:Vue
步驟1：明確發送 接收
步驟2：發送
this.$router.push('/detail/123')
<router-link to='/detail/123'></router-link>
步驟3：配置路由地址
/detail --》 /detail/:id
this.$route.params.id

Angular:
①明確發送 接收方
②配置接受方的路由地址、接收
oc-->oc/:price
import {ActivatedRoute} from '@angular/router'

constructor(private myRoute:ActivatedRoute){}

this.myRoute.params.subscribe((result)=>{
//result.price
})

③發送
<h2 routerLink="oc/1000">去結算</h2>
this.myRouter.navigateByUrl('oc/1000')

要傳遞的參數是變量:
myPrice = 1000;
<h2 [routerLink]="'oc/'+myPrice">去結算</h2>
this.myRouter.navigateByUrl('oc/'+this.myPrice)

 

四、進階知識--路由嵌套
在一個路由對象中，嵌套了其它的路由對象

A組件須要嵌套B、C
步驟1：給A組件指定一個盛放其餘組件的容器
<router-outlet></router-outlet>
步驟2：配置子路由
{
path:'a',
component:AComponent,
children:[
{path:'b',component:BComponent},
{path:'c',component:CComponent}
]
}

需求:
demo20-login
demo21-mail
demo21-inbox
demo21-outbox

注意事項:
①單獨來訪問某個子路由，必須得攜帶父路由的地址
http://localhost:4200/mail/inbox

五、進階知識--路由守衛
路由守衛：保護一個路由地址所對應的組件是否能夠被訪問
常常將路由守衛封裝在一個服務類中

步驟1：建立一個服務類
ng g service my-guard
步驟2：讓服務類實現了CanActiviate
import {CanActivate} from '@angular/router'

export class MyGuardService implements CanActivate{
//能夠在該方法中，判斷用戶是否能夠訪問它要保護的頁面，若是返回true意味着能夠訪問，不然是禁止訪問
canActivate(){

return true/false;
}

}

步驟3：找到app-routing.module.ts
import {MyGuardService} from './my-guard.service'
{
path:'mail',
component:MailComponent,
canActivate:[MyGuardService]
}

7、Angular總結:
①組件:定義視圖

②服務:將常常用到的數據和方法封裝在一個類中；這能讓你的代碼更加模塊化、可複用，並且高效

③依賴注入(DI): 服務的元數據提供了一些信息，Angular 要用這些信息來讓組件能夠經過使用該服務

④裝飾器：用來描述當前這個類是一個什麼樣的類 @Component @NgModule @Pipe @Directive @Injectable

⑤模板:普通的 HTML 和指令與綁定標記（markup）組合起來

⑥指令:模板中的指令會提供程序邏輯
循環、條件判斷。。。

⑦數據綁定:綁定標記會把你應用中的數據和 DOM 鏈接在一塊兒。
①事件綁定讓你的應用能夠經過更新應用的數據來響應目標環境下的用戶輸入。
②屬性綁定讓你將從應用數據中計算出來的值插入到 HTML 中。
③雙向數據綁定

⑧管道：轉換要顯示的值以加強用戶體驗

8、學習基於Angular的ui組件庫
https://github.com/gdi2290/awesome-angular

PC:
https://material.angular.cn/
https://ng.ant.design/docs/introduce/zh
Mobile:
ionic

9、Ionic概述
ionic = angular + phonegap + 封裝的組件和icon

what?
ionic用來構建移動端的應用程序的開源框架
why?
基於Angular、cordova
支持es6和ts
強大的cli支持
how?
npm install -g ionic
ionic start myApp tabs
cd myApp
ionic serve

//npm start
若是如今中心沒有采用萬壽路鏡像的母盤：
有外網:npm install -g ionic
沒外網:
①將ionic_cmd.zip拷貝到 C:\xampp\htdocs\framework\ng
②解壓縮到當前的文件夾
③將C:\xampp\htdocs\framework\ng\node_mo
dules\.bin添加到環境變量

10、Ionic中Page類的建立和調用
建立:
ionic g page demo01

準備工做:
app.module.ts
import {Demo01Page} from '../pages/demo01/demo01'
@NgModule({
declaratons:[Demo01Page],
entryComponents:[Demo01Page]
})
調用:
app.component.ts
import {Demo01Page} from '../pages/demo01/demo01'
rootPage:any = Demo01Page;

練習:建立一個新的頁面demo02-lianxi
讓根組件默認顯示這個頁面；在這個頁面類中 定義一個數組 list = [100,200,300];將數組循環遍歷 在無序列表中建立多個列表項

11、Ionic中常見組件 (重點)
一、button
ion-button
color: primary藍色 secondary綠色 danger 紅色 light淺灰色 dark黑色
（theme/variables.scss修改$colors變量）
outline 邊框
clear 只保留按鈕中的文本信息
block 佔據父容器的寬度
large/small 大小
round 圓角效果
icon-left/right
<ion-icon name=""></ion-icon>

二、list
普通列表
<ion-list>
<ion-item>
</ion-item>
</ion-list>
icon列表
<ion-list>
<ion-item>
<ion-icon item-start/end></ion-icon>
</ion-item>
</ion-list>
avatar列表
<ion-list>
<ion-item>
<ion-avatar item-start/end>
<img/>
</ion-avatar>
</ion-item>
</ion-list>
thumbnail列表（重點）
<ion-list>
<ion-item>
<ion-thumbnail item-start/end>
<img/>
</ion-thumbnail>
</ion-item>
</ion-list>

進階知識：
支持側滑動的列表項
<ion-list>
<ion-item-sliding *ngFor="">
<ion-item></ion-item>
<ion-item-options>
<button></button>
</ion-item-options>
</ion-sliding>
</ion-list>

下拉刷新（重點）
步驟1：在ionContent第一個子元素的位置來調用ion-refresher
步驟2：綁定事件
<!--ios ios-small bubble circle crescent dots -->
<ion-refresher
(ionRefresh)="handleRefresh($event)">

<ion-refresher-content
pullingIcon="arrow-round-down"
pullingText="下拉刷新"

refreshingSpinner="bubbles"
refreshingText='正在刷新'>

</ion-refresher-content>
</ion-refresher>
步驟3：在事件處理函數作數據的操做，最後要結束刷新動做
handleRefresh(refresher){
//數據處理完成
refresher.complete()
}

上拉加載更多（重點）
步驟1:在ionContent最後一個子元素的位置來調用ion-infinite-scroll
步驟2：綁定事件 ionInfinite
<ion-infinite-scroll
(ionInfinite)="handleInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles" loadingText="正在加載更多...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
步驟3：在事件處理函數作數據的操做，最後要結束刷新動做

練習:建立一個page:demo06-lianxi (:-16:50)
步驟1:在demo06-lianxi.ts中準備一個空的數組
步驟2：在demo06-lianxi.html中指定
一個按鈕(加載更多)
一個支持側滑動列表項的列表(列表項隱藏 一個叫作刪除的按鈕，點擊刪除，將當前 的列表項從列表中移除掉)
步驟3：點擊按鈕(加載更多)，向數組中插入20條隨機的數據，最終顯示在列表

三、card
卡片是爲了更好的展現數據
<ion-card>
<ion-card-header></ion-card-header>
<ion-card-content></ion-card-content>
</ion-card>

四、grid
ionic中的grid是基於flexbox來封裝而來的，
幫助實現自定義的佈局

flexDirection 指定主軸
justifyContent 沿着主軸對齊
alignItems 沿着交叉軸對齊

基本用法:
<ion-grid>
<ion-row>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
<ion-row>
</ion-row>
</ion-grid>
基本配置:
①指定列寬: <ion-col col-*></ion-col>
②設置行全部的列縱向對齊的方式:
align-items-center/start/end
③設置某一列在行中的縱向對齊方式:
align-self-center/start/end
④橫向對齊
justify-content-start/center/end
⑤偏移量
offset-*
⑥右推或左拉
push/pull-*

五、輪播圖
ion-slides
autoplay自動播放的時間間隔
loop 輪詢
pager 顯示指示器
effect 動畫效果
speed 動畫的速度（持續的時間）
paginiationType 指示器的類型
direction 方向

<ion-slides autoplay=1000 loop=true
pager=true effect="cube" speed=3000
paginationType="fraction"
direction="vertical">
<ion-slide>
123
</ion-slide>
<ion-slide>
456
</ion-slide>
<ion-slide>
789
</ion-slide>
</ion-slides>

六、支持滾動的容器(ionScroll)
<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>

注意事項:
①指定寬度或者高度
②scrollX/scrollY

七、常見的窗口的用法
7.1 loading
顯示一個正在加載中的提示窗口

import {LoadingController} from 'ionic-angular'

constructor(private myLoadingCtrl:LoadingController){}

var myLoading = this.myLoadingCtrl.create({
content:'',
duration:,
spinner:'bubbles'
});

myLoading.present();
myLoading.dismiss();

7.2 actionSheet
顯示一個由多個選項構成的從下往上彈出的窗口

import {ActionSheetController} from 'ionic-angular'

constructor(private myASCtrl:ActionSheetController){}

var myActionSheet = this.myASCtrl.create({
title:'',
buttons:[
{
text:'',
handler:()=>{},
role:'cancel/destructive'
}
]
});

myActionSheet.present()

7.3 alert
警告、確認、輸入提示
import {AlertController} from 'ionic-angular'

constructor(private myAlertCtrl:AlertController){}

var myAlert = this.myAlertCtrl.create({
title:'',
message:'',
inputs:[
{placeholder:""}
],
buttons:[
{
text:'',
handler:(result)=>{
//result是輸入框的數據 result[0]
}
}
]
});

myAlert.present()

7.4 toast
用在用戶操做以後經過一個通知告訴用戶操做的結果
import {ToastController} from 'ionic-angular'

constructor(private toastCtrl:ToastController){}

var myToast = this.toastCtrl.create({
message:'',
duration:,
position:'top/middle/bottom',
showCloseButton:true,
closeButtonText:''
})

myToast.present()

7.5 modal
自定義的模態窗口的實現

基本用法：
import {ModalController} from 'ionic-angular'

constructor(private modalCtrl:ModalController){}

var myModal = this.modalCtrl.create(//要顯示的頁面類)

myModal.present()

進階知識:
若是關閉？
ViewController
import {ViewController} from 'ionic-angular'

constructor(private viewCtrl:ViewController){}

this.viewCtrl.dismiss()

參數的傳遞和接收？
①傳遞
this.viewCtrl.dismiss(123)
②接收
this.myModal.present()
this.myModal.onDidDismiss((result)=>{
//result就是模態窗在被關閉時所攜帶的參數
})

八、表單
ionic中的表單是經過ionList和ionItem來進行管理的

8.1 輸入框
根據label展現方案的不一樣，共有五種移動端的寫法
<ion-label></ion-label>
<ion-label fixed></ion-label>
<ion-label floating></ion-label>
<ion-label stacked></ion-label>
不寫標籤
8.2 複選框
<ion-checkbox></ion-checkbox>

8.3 單選框
<ion-list radio-group>
<ion-item>
<ion-radio></ion-radio>
</ion-item>
</ion-list>

8.4 滑動開關
<ion-toggle></ion-toggle>

8.5 滑動組件
<ion-range></ion-range>

8.6 下拉菜單
<ion-select>
<ion-option></ion-option>
</ion-select>

九、tabs
步驟1：引入tab被選中時 要加載的頁面類
import {HomePage} from '***'
步驟2：將頁面類保存在當前組件中
tabHome = HomePage;
步驟3：
<ion-tabs>
<ion-tab [root]="tabHome" tabIcon="" tabTitle=""></ion-tab>
<ion-tab></ion-tab>
<ion-tab></ion-tab>
</ion-tabs>

12、Ionic中處理導航和傳參(重點)
導航:
js:
步驟1:引入必要的類
import {NavController} from 'ionic-angular'
import {DestinationPage} from '..'
步驟2：實例化
constructor(private navCtrl:NavController){}
步驟3： 跳轉
this.navCtrl.push(DestinationPage)

屬性:
步驟1：引入
import {DestinationPage} from '..'
步驟2：保存
detail = DestinationPage
步驟3：調用
<any [navPush]="detail"></any>

傳參:
①明確發送方和接收方
②發送
this.navCtrl.push(Demo16DetailPage,10)

[navPush]="detail" [navParams]="10"
③接收
import {NavParams} from 'ionic-angular'

constructor(private navParams:NavParams){}

this.navParams.data

十3、Ionic中page類的生命週期
ionViewCanEnter //守護當前pages是否能夠進入
ionViewCanLeave//守護當前pages是否能夠離開
ionViewDidLoad //加載一次
ionViewWillEnter //準備進入
ionViewWillLeave //準備離開
ionViewWillUnload//加載一次

this.navCtrl.pop()//怎麼返回上一頁
this.navCtrl.canGoBack() //返回值是true/false
//在某一個tab中，選中第0個tab
this.navCtrl.parent.select(0)

十4、Ionic的項目

(組件、基本語法、組件間通訊、網絡通信、路由)

十5、React概述
React的應用廣的領域中：
ReactJS
ReactNative
ReactVR
全部React中的技術都是基於五大核心概念的

slogan: learn once,write anywhere

一、what
React是facebook推出的，用來構建ui的js的庫
二、why
①大量的DOM操做致使的瀏覽器性能瓶頸問題
VDOM (virtual DOM)
②代碼增多，致使開發和維護愈來愈麻煩
單向數據流
三、優勢
①採用聲明式寫法
②高效
虛擬DOM
③靈活
方便的搭配其它庫來使用
④jsx
react支持jsx的語法，不是一種新的語言，是容許在js中直接寫標籤
⑤組件
組件是可被複用的視圖
四、搭建環境
方式1：直接引入對應的js文件
方式2：基於cli
npx create-react-app my-app
cd my-app
npm start

十6、五大核心概念以及核心思想
補充：C:\Users\web\.vscode\extensions

一、核心思想：
組件的封裝和複用

二、核心概念
2.1 jsx
兩個基礎語法：
①容許在js直接寫標籤（遇到<,就會用html解析）
②在標籤經過{}作運算 (遇到{,就會用js來解析)

注意事項：
①要同時渲染多個，要放在同一個頂層標籤中
②註釋
{/* it is a comment*/}

2.2 組件
回顧:
Vue
Vue.component('demo01',{
components:{}
})
Angular
@Component({
selector:'demo01',
templateUrl:'',
styleUrls:[]
})
export class Demo01Component{}

React中組件類的建立和使用
2.1 建立
var Demo01 = React.createClass({
render(){
return 組件要渲染的模板
}
});
2.2 使用
<Demo01></Demo01>
2.3 注意事項
①組件類的命名要遵循全駝峯式的命名方式
②return後第一個標籤不要換行
③不容許直接渲染多個
④每個標籤都要有本身的結束標記

複合組件：就是一個組件，只不過在此組件中調用了其它的組件

2.3 props（重點）
回顧：
Vue:
<son sonName='zhangsan'></son>
Vue.component('son',{
props:['sonName']
//this.sonName
})
Angular:
<son sonName='zhangsan'></son>
import {Input} from '@angular/core'
export class SonComponent{
//接收
@Input() sonName = "";
//this.sonName
}

React:
①props的基本用法（父--》子）
步驟1：經過自定義屬性傳值
<MyHeader myTitle='123'></MyHeader>
步驟2：經過props對象接收
在MyHeader組件內部接收：this.props.myTitle

②進階知識1（this.props.children）
任何一個組件內部，都有一個props對象，該對象中對應的key和組件被調用時屬性的名稱是一一對應的；可是有一個是例外的
this.props.children (類型是不肯定的，若是有一個子標籤--》對象 多個-->數組，一個都沒有--》undefined)

//this.props.children
//官方建議的遍歷工具:
React.Children.map(this.props.children,(value,key)=>{
//value就是子標籤
})
③進階知識2 (子--》父)

步驟1：父組件定義一個有參數方法
login:function(uname){
//uname就是子組件傳來的數據
}
步驟2：將方法經過自定義屬性傳遞給子組件
<son func={this.login}></son>
步驟3：子組件能夠調用父組件經過屬性來傳遞的方法，同時將值經過參數傳遞給父組件
this.props.func('zhangsan')

問題：
在事件綁定事件處理函數，想自定義傳參怎麼解決？？
<button onClick={this.handleClick}></button>

2.4 ref
幫助經過一個引用的名稱,找到某一個組件的實例或者一個dom元素

步驟1：指定ref
<Son ref="mySon"></Son>
步驟2：經過ref指定的名稱找到元素或者組件
this.refs.mySon

2.5 state
功能1：處理數據
初始化：
getInitialState:function(){
return {count:1}
}
讀
this.state.count
寫
this.setState({count:2})
this.setState({count:2},()=>{
//當本次狀態寫操做成功以後會執行的
})
功能2：綁定的效果（狀態中的數據綁定到視圖中）

練習:demo14_lianxi.html (:- 11:25)
步驟1：建立一個組件,SwitchComponent,該組件中渲染一個按鈕就能夠。
做爲根組件來渲染
步驟2：按鈕中的文本內容（默認顯示關）：開/關

注意事項：
React官方：
①順序
建議將render方法放在組件的最後一個位置，最前邊放的是生命週期的鉤子函數或者react官方提供的其餘方法(getInitialState),
中間應該放的是自定義的方法
②react編程時，方法主要分爲兩類，一類是自帶的(getInitialState/render/componentDidMount/...)，一類程序員自定義的

三、第一個Demo
知識點1: ReactDOM.render()
ReactDOM.render(A,B)
實例:
ReactDOM.render(
<h1>hello react</h1>,
document.getElementById('example')
)
知識點2：babel
babel是一個js的編譯器compiler(能夠將es6或者jsx轉換爲瀏覽器如今可以識別的語法)
<scrip type='text/babel'></script>
知識點3：jsx（瀏覽器默認是不識別的，須要babel轉換）
jsx(javaScript xml)並非一種的語言,只不過是容許在js中寫標籤

四、React中組件的生命週期
回顧:
Vue:
create/mount/update/destroy
Angular:
ngOnInit/ngOnChanges/ngOnDestroy
Ionic:
ionViewCanEnter
ionViewWill/DidEnter
ionViewWill/DidLeave
ionViewCanLeave
React:
三個階段：mount/udpate/unMount

對應的鉤子函數：
componentWill/DidMount：作初始化工做
componentWill/DidUpdate：根據數據的變化 作處理
componentWillReceiveProps:當屬性傳來的值 發生變化的時候會執行(容許修改狀態的)

componentWillUnmount：作清理工做

注意事項:
①要想經過ref找一個元素，必須得等到componentDidMount或者以後的階段才能夠
②當狀態或者屬性傳來的值發生變化的時候，纔會執行和update相關的鉤子函數
③不容許在componentWill/DidUpdate中去執行和狀態寫操做相關的操做，這會致使死循環（耗盡資源）
④不容許修改經過屬性傳來的值（只讀）
//報錯：this.props.** = **;


五、受控表單元素的處理(並非全部的表單元素都得按照受控的方式來處理)
在reactjs進行編程，若是表單元素出現:value/checked/selected等相關屬性；表單元素就不受咱們控制；將這樣的表單元素稱之爲受控的表單元素

解決方案1：
變成非受控的表單元素(value-->defaultValue)
解決方案2：
①初始化狀態
getInitialState:function(){
return {addr:'bj'}
}
②將狀態的值綁定value
<input value={this.state.addr}/>
③onChange指定的事件處理函數中 完成狀態的寫操做
handleChange(e){
this.setState({addr:e.target.value});
}
<input onChange={this.handleChange} value={this.state.addr}/>

六、進階知識
ReactJs自己並無提供任何的指令
①循環
{
this.state.list.map(()=>{
//在迭代函數中 返回要重複建立的元素
return <li></li>
})
}
②判斷
方案1：當判斷條件比較簡單時，能夠經過短路邏輯（邏輯與運算來實現）
{
expression && 渲染的內容
}
方案2：當判斷條件比較複雜時，能夠封裝一個方法
showSth(){
//作運算，獲得最終一個結果
if(真){
//返回條件爲真時要顯示的內容
}else
....
}

{this.showSth()}
③事件傳參
Vue:
<button @click="handleClick(1)"></button>
Angular:
<button (click)="handleClick(1)"></button>
小程序:
<button data-uname="" bindTap= ></button>
React:
<button onClick={()=>this.handleClick(0)}>
刪除
</button>

十7、RN(ReactNative)概述
React Native:
Build native mobile apps using JavaScript and React
(使用React中基本語法和js基本知識，來完成原生的移動端的應用程序的開發)

（競品:flutter cordova weex reactNative）

如何來使用RN作原生開發？
經過react基本語法和js，調用RN所封裝的各類組件 ，在運行時，就會被編譯成當前平臺下的原生的控件

搭建環境：
步驟1：準備模板項目
將rn.zip拷貝到C:\xampp\htdocs\framework\react；解壓縮；進入到rn文件夾，將myapp.zip解壓縮

vscode打開C:\xampp\htdocs\framework\react\rn\myapp

啓動命令行終端: npm start
(能夠在瀏覽器中輸入http://localhost:8081來進行訪問)

步驟2：準備模擬器
①啓動
②安裝apk文件
C:\xampp\htdocs\framework\react\rn\myapp\android\app\build\outputs\apk
③啓動安裝後得來的myapp
④正確的設置要鏈接的開發服務器的地址和端口
172.163.100.191:8081
搖一搖--》Dev Settings-->Debug Server Host & Port for device-->在輸入框中輸入地址和端口 保存
⑤搖一搖--》reload 從新載入

準備模板有不少方案：
npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject

開發技巧：
如何查看console所輸出的日誌信息:
搖一搖--》debug js remotely--》在瀏覽器中打開一個新的標籤頁，在終端中查看log日誌信息

十8、RN中基礎知識
一、自定義一個組件並調用
①建立
import React,{Component} from 'react'

export default class Demo01 extends Component{
render(){
return 渲染的內容
}
}
②調用
案例：在index.android.js所封裝的myapp中調用自定義組件:
引入: import Demo01Component from './app/components/demo01_first'

調用:<Demo01Component></Demo01Component?

注意事項:
①不容許調用html標籤
②使用一個組件 都要先去引入才能使用
③要注意類導出和引入的方式
建議：導出加上default

二、state
初始化
constructor(){
super();
this.state = {count:1,name:'lucy',age:20}
}
讀寫操做和ReactJS中是保持一致的.

三、StyleSheet
import {StyleSheet} from 'react-native'

//建立要複用的樣式
var myStyles = StyleSheet.create({
myText:{
color:'red',
fontSize:30
}，
myImage:{
width:100,
height:100
}
})

//調用封裝好的樣式
<Any style={myStyles.myText}></Any>

四、自定義佈局(FlexBox)
http://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment

flexDirection 主軸方向
justifyContent 沿着主軸的對齊
alignItems 沿着交叉軸的對齊

主軸：column

五、發送網絡請求
fetch("")
.then((response)=>response.json())
.then((result)=>{
//result就是能夠直接使用的數據
})

十9、RN中常見的內置組件

一、Text
渲染文本內容
import {Text} from 'react-native'
<Text>123</Text>
二、View
指定一個容器
import {View} from 'react-native'
<View>
//嵌套的組件
</View>
三、Button (onPress)
import {Button} from 'react-native'
<Button title='' onPress={}></Button>

注意事項：
事件處理函數 若是須要用到組件實例對象中的this或者其餘，推薦定義成箭頭函數的形式
handlePress=()=>{

}
四、Image
import {Image} from 'react-native'
//本地圖片
<Image source={require('../imgs/3.jpg')}></Image>
//服務器端的圖片
<Image source={{uri:""}} style={{width:100;height:100}}></Image>

注意事項：
①加載服務器端的圖片必須設置寬 高
②加載本地資源圖片時，不容許在require()方法中作任何的運算
五、FlatList
是RN中一個高性能的列表展現組件
import {FlatList} from 'react-native'

//有參數有返回值的
//info是一個對象:item/index
showItem(info){
return <Text></Text>
}

<FlatList data={} renderItem={this.showItem}>
</FlatList>

注意：
如何指定key提高性能?
六、TextInput(onChangeText)
定位：獲取用戶輸入的信息
<TextInput
secureTextEntry={true}
placeholder=""
onChangeText={}
value=""
></TextInput>
七、Switch (onValueChange)
Switch默認就是一個受控的表單元素
處理方案：
①初始化狀態
②將狀態的值綁定到Switch的value
③onValueChange對應的事件處理函數中 完狀態的寫操做
八、TouchableOpacity
是一個容器，放在該容器中的組件，在按下時，是會有透明度漸變效果的

<TouchableOpacity onPress={}></TouchableOpacity>

九、綜合練習:
使用RN實現ToDoBox
①搞定全部的組件的靜態模板
②實現add (:- 10:30)
（點擊ToDoInput的add時，將輸入框的值傳遞給ToDoBox；在ToDoBox中接收到傳來的輸入框的值，保存在狀態(狀態的類型：數組)，在成功保存以後，打印
④將數組經過自定義屬性傳遞給ToDoList
⑤ToDoList接收到屬性傳來的數組，遍歷，建立多個ToDoItem
(:- 11:35)
⑥ToDoList在調用ToDoItem，將顯示的數據傳遞給ToDoItem
⑦完成：在ToDoItem中的刪除按鈕按下，將當前的下標傳遞給ToDoBox，ToDoBox接收到下標時，從數組中刪除指定下標的元素
⑧點完添加按鈕以後，清空輸入框的內容
十、ScrollView
功能：實現一個支持滾動的容器
用法:
import {ScrollView} from 'react-native'
<ScrollView></ScrollView>

實現固定頁腳的效果:
<View style={{flex:1}}>
<ScrollView></ScrollView>
<View>
<Button></Button>
</View>
</View>

十一、列表的擴展功能
①加載更多
<FlatList onEndReached={}></FlatList>

②實現指定key來提高性能的效果
FlatList在渲染列表項時，若是給渲染的列表項綁定key屬性是不會生效的

解決思路：將data所指定的數組類型 改成對象數組，每一個對象都必須包含一個屬性key(對應的值要保證惟一性)

data={[{key:0,**},{}]}
十二、ActivityIndicator
功能：顯示一個加載中的指示器
用法:
import {ActivityIndicator} from 'react-native'

<ActivityIndicator size="large/small" color="">
</ActivityIndicator>


二10、ReactNavigation
回顧：
Vue/Angular:
路由模塊：創建組件和url之間的映射關係
①路由的基本用法
舉例：Vue
步驟1：安裝並調用vueRouter插件
步驟2：<router-view></router-view>
步驟3：建立app要用到的各個組件
步驟4：配置路由詞典(一個由路由對象構成的數組)
list = [{path:'',component:**,children:**},{}]
步驟5：測試url和組件是否匹配

②導航
this.$router.push()

import {Router} from '@angular/core"
private myRouter:Router
this.myRouter.navigateByUrl()

③傳參
發送方和接收方
配置接收方的路由地址、接收參數
Vue:this.$route.params
Angular:
import {ActivatedRoute} from '@angular/router'

發送

④嵌套
路由嵌套：在一個路由對象中嵌套了其它的路由對象
[
{
path:'mail',
component:MailComponent,
children:[
{path:'inbox',component:Inbox}
....
]
}
]

⑤守衛
Vue:
beforeEach
Angular
路由對象中調用路由守衛服務:
。。。

功能：
Routing And Navigation for ReactNative apps
提供的導航方案：
StackNavigator
TabNavigator
DrawerNavigator(https://reactnavigation.org/docs/en/drawer-based-navigation.html)

基本用法:
步驟1：安裝包
yarn add react-navigation
# or with npm
# npm install --save react-navigation
步驟2：建立app要用到的各個組件
步驟3：配置路由
import {createStackNavigator} from 'react-navigation'
import Demo17Login from '***'

var MyNavigator = createStackNavigator({
'login':{
screen:Demo17Login
},
'setting':{
screen:***
}
})

AppRegistry.registerComponent(
'myapp',
()=>myNavigator
)

注意事項：出如今createStackNavigator方法中的配置對象的第一個keyValue是默認要顯示的頁面
步驟4：測試

跳轉：
this.props.navigation.navigate("目的地的路由地址")

傳參：
步驟1：明確發送方和接收方
步驟2：發送
this.props.navigation.navigate('目的地地址',{pid:10})
步驟3：接收參數
方案1：
this.props.navigation.state.params.pid
方案2：
this.props.navigation.getParam('pid')

二1、項目 優化建議: 將須要複用的數據或者方法，封裝起來以方便複用 好比：app/utils/global.js 封裝東西 其它組件引入調用便可 附加參考網址，有興趣瞭解下 https://react.docschina.org/ react https://developers.weixin.qq.com/miniprogram/dev/api/ 小程序API https://segmentfault.com/ 思否 https://www.cnblogs.com/xiaohaifengke/p/7308943.html vue之better-scroll的封裝,包含下拉刷新，上拉加載功能 https://blog.csdn.net/TWFKXP/article/details/80574987 BFC https://mint-ui.github.io/#!/zh-cn mint-ui http://jsonplaceholder.typicode.com/ jsonhttps://blog.csdn.net/lijia_1983370657/article/details/80489979http://element-cn.eleme.io/#/zh-CNhttp://mockjs.com/https://www.cnblogs.com/pssp/p/5216085.htmlhttps://www.sass.hk/guide/https://reactnavigation.org/https://segmentfault.com/a/1190000013336235https://juejin.im/post/5a954add6fb9a06348538c0dhttp://weex.apache.org/cn/guide/index.htmlhttps://reactnative.cn/https://segmentfault.com/a/1190000011358507https://segmentfault.com/a/1190000008879966http://www.bejson.com/https://www.jianshu.com/u/92ffdfb520e7https://www.jianshu.com/p/f43fe49065a0