day53 ES6とVUE

3、ES5と6のい​​くつかの新機能

1 、およびletコマンドのconstの

てみましょう:ローカル変数を定義します

CONST:定数を定義します

 

2 、式の構造

解体の配列

ARR = [2,5、-10、-15]ましょう。

[X、Y] = ARR -------------> X = 2、Y = 5せ

[,,、B] = ARR -------------> A = -10、B = -15せ

--------> DOは残りの上、最初の休憩を取ることはありませ[、...残り]みましょう

 

オブジェクトの解体

P = {: "ジャック"、年齢:名21}ましょう。

聞かせて{名前、年齢} = P ----------------->名前:ジャックの年齢:21

 

エイリアス

ましょう{名:N} = P -------------> N:ジャッキ

 

複雑なオブジェクトの分析

P = {名: "ジャック"、年齢:21、女の子:{名: "ローズ"、年齢:20}}

てみましょう{少女:{名前}} = P ------->名前:バラ

 

せ... {OBJ} = P P全体オブジェクトobjに割り当て

ディープ実際にはオブジェクトのオブジェクトアドレスが同じではありませんコピー

 

3 、機能の最適化

アロー機能:

CONST追加=(A、B)=> A + B。

 

オブジェクトの最適化機能

CONST P = {

名前:「ジャック」、

年齢:21、

sayHello(){

XXXXXXXX

}

}

 

関数は、式の構造であってもよいです

ハローCONST =関数({名前、年齢}){

console.info(名前、年齢);

}

 

結合機能矢印の発現と機能

ハローCONST =({名前、年齢})=> console.info(名前、年齢)。

 

 

4 、および地図を削減

マップ:個々に処理要素のセット

[ ' - 20' ' - - 10'、 '15'、 '2'、 '5'、] ARR =せ

ARR = arr.map(S =>のparseInt(S))しましょう。

 

受信機能(必須)と初期値(オプション):()を低減

 

 

四、VUE

1、コマンド

ノードは、ノードのバージョンを表示-v

NPM -v NPMのバージョンを表示

NRM -gグローバルNPMは、ミラーマウントツールを切り替えるインストール

*現在画像倉庫選択されるとNRM LSは、NPM倉庫のリストを表示するためのコマンド

NRMが指定され、使用するXXXミラーソースを使用します

NRMテストNPMの試験速度

 

=====

プロジェクトで:

NPMのinit -yプロジェクトの初期化

NPM VUE --saveローカルインストールVUEをインストールする(つまり、そのプロジェクトにのみ固有の)

 

 

2、VUEエントリー

<DIV ID = "アプリ">

<ボタンをクリックする= "handleClick" @>点我</ボタン>

<input type = "text" Vモデル= "NUM"> <ボタンをクリック@ = "NUM ++"> + </ボタン>

<H1>

{{名前}}非常にハンサム<BR>

{{numが}}破壊の女の子がありました!

</ H1>

</ div>

<スクリプトSRC = "node_modules / VUE / DIST / vue.js"> </ SCRIPT>

<スクリプト>

CONST アプリ =新しいビュー({

エル: "#アプリ"、//要素、VUE役割ラベル

データ:{

名前:""、

:1

}、

方法:{//メソッド

handleClick:関数(){//簡略機能文言

コンソールの.log(「こんにちは、ガオヤンは、あなたは本当にかなり特殊なよ!!」)

}

}、

作成:関数(){//ライフサイクルフック関数

//データを初期化データを完了するために、バックグラウンドに要求を開始

this.name = "高燕"

}

 

})

</ SCRIPT>

 

Vモデル:ビューモデルとの双方向結合

@click:イベントをクリックします

 

 

4、VUEライフサイクルフック関数

作成:関数(){//ライフサイクルフック関数

//データを初期化データを完了するために、バックグラウンドに要求を開始

this.name = "高燕"

}

 

5、VUE命令

1){} {}補間式

質問:補間を点滅します

 

2、v-text 和 v-html

違い:V-HTMLは、ラベルをレンダリングすることができます

 

3、Vモデル:双方向結合

<DIV ID = "アプリ">

<ボタンをクリックする= "handleClick" @>点我</ボタン>

<input type = "text" Vモデル= "NUM"> <ボタンをクリック@ = "NUM ++"> + </ボタン>

<H1>

{{名前}}非常にハンサム<BR>

{{numが}}破壊の女の子がありました!

</ H1>

<時間>

<input type = "チェックボックス" Vモデル= "教訓" 値= "Javaの" /> Javaの<BR/>

<input type = "チェックボックス" V-モデル= "レッスン" 値= "PHP" /> PHP <BR/>

<input type = "チェックボックス" V-モデル= "レッスン" 値= "スイフト" />スイフト<BR/>

<H1>

あなたが選択した:{{lessons.join( '')}}

</ H1>

</ div>

<スクリプトSRC = "node_modules / VUE / DIST / vue.js"> </ SCRIPT>

<スクリプト>

CONST アプリ =新しいビュー({

エル: "#アプリ"、//要素、VUE役割ラベル

データ:{

名前:""、

:1、

教訓:[]

}、

方法:{

handleClick:関数(){//簡略機能文言

コンソールの.log(「こんにちは、ガオヤンは、あなたは本当にかなり特殊なよ!!」)

}

}、

作成:関数(){

//データを初期化データを完了するために、バックグラウンドに要求を開始

this.name = "高燕"

}

 

})

</ SCRIPT>

 

4、V-上

Click.stop @:イベントバブリングを停止

.prevent:デフォルトのイベントを防ぎます

.self:トリガーにのみ、独自の要素

 

5、V-用

//トラバース配列

<UL>

<LIのV-ため= "(ユーザー、インデックス)のユーザーが、">

{{インデックス+ 1}}。{{user.name}} - {{user.gender}} - {{}} user.age

</ LI>

</ UL>

//トラバースオブジェクト

<UL>

<= V-ため李 "(V、K、I)ユーザーが[0]"> < - V:值K:键I:索引 - >

{{I} - {{K}:{{V}}

</ LI>

</ UL>

 

 

6、V-IF和V-ショー

違い:

V-IF:要素を直接殺します

V-ショー:表示属性によって制御さ

 

7、V-バインド

補間式は、プロパティで使用することはできません

V-バインド:クラス= "色" 或者:クラス= "色"

 

クラスは、変数として定義されます

 

 

8、属性は基本的に計算方法で、属性の計算は、戻り値を持っている必要があります

//初期化は唯一VUEで動作しています

計算:{

誕生(){

動作させる性質の方法@

}

}

 

===== 36

 

おすすめ

転載: www.cnblogs.com/houchen/p/12203775.html