Cui CuiVueスタディノート仕上げ

1. Vueの理解:VueはプログレッシブJavaScriptフレームワークです

2. Vueの機能:軽量フレームワーク、双方向データバインディング、命令、プラグイン。

3. Vue構文:

				new Vue({
						el:"#app", 用于挂载要管理的元素
					data:{  //定义数据​												
						}
					})

4. Vモデルは、フォーム要素値の双方向データバインディングを取得および設定します。

	1.指令的作用是便捷的设置和获取表单元素的值

    2.绑定的数据会和表单的数据关联

    3.二者相互绑定,不论哪一方发生变化,另一方都会变化。

5.手順:

5.1v-textは{ {xxx}}と同等です

		<span v-text="msg"></span> 

		<!-- 和下面的一样 -->

		<span> {
   
   {msg}} </span>

5.2 v-html

		v-html = "xxx" 内容按照html进行插入

5.3v-show和v-if

:v-showは、要素のdisplay属性を介して要素が存在するかどうかを設定し、v-ifは、要素のDOMノードが存在するかどうかを設定します。

5.4 v-if v-else-if v-else

条件は、特定の条件が満たされた場合にのみ表示されます。つまり、結果がtrueの場合に表示されます。これは、JavaScript 0、null、undefined、falseがfalse、その他がtrueに相当します。

5.5v-forループトラバーサル

	<div v-for ="(item,index) in arr">{
   
   {item}}  </div>

itemは配列内の各要素を表し、indexは添え字を表します。

	<div v-for = "(val,key) in obj">{
   
   {val}}{
   
   {key}} </div>

valはオブジェクトの属性値を表し、keyは属性を表します

	<div v-for = "(val,key,index) in obj"></div>

valは属性値を表し、keyは属性を表し、indexは属性の添え字を表します。

5.6v-onバインディングオブジェクトの省略形@バインディングイベント。

.stop:イベントバブリングの防止と同等のメソッドはevent.stopPropagation()と同じです。通常の状況では、最も内側のバインドされた関数が最初に実行され、次に外側にバブリングされます。

.captureイベントのバブリング中に、キャプチャが外部イベントに追加されると、キャプチャを使用する最も外側の関数が最初に実行されます。例:キャプチャイベントで結合されたdivの4つのレイヤーと13のレイヤーがあり、イベントのバブリングの順序は、外側から内側にキャプチャを実行し、次に内側から外側にバブリングすることです。

.preventイベントを防止するデフォルトの動作はevent.preventDefault()と同じです。たとえば、ラジオボタンのデフォルトイベントがクリックされないようにするために、リンクがクリックされた後はチェックマークが表示されず、ページは表示されません。クリックして更新します。

.selfは、イベントがトリガーされた場合にのみイベントをそれ自体にバインドします。自己バインドイベントがトリガーされます。つまり、イベントバブリング中に自己バインドイベントがスキップされます。

.once一度バインドされたイベントは、一度実行されると破棄され、次にクリックされたときにトリガーされ続けることはありません。バブルされると、イベントも無効になり、バインドされたバブル防止イベントが無効になります。また、無効になり
ます。、Keydown、keyupキーボードイベントがトリガーされると、Enter Shiftctrlなどの特別なキーにバインドすることもできます。他のキーを
押すとASCII値を取得できます。left-(2.2.0)左の場合にのみトリガーされます。マウスボタンがクリックされます。

.  right` - (2.2.0) 只当点击鼠标右键时触发。

.middle`-(2.2.0)マウスの中ボタンがクリックされたときにのみトリガーされます。

.passive - (2.3.0) 以{passive:true} `モードでリスナーを追加

5.7 v-bindは、次のように省略されます。バインドバインディングイベント:1つ以上の属性、またはコンポーネントプロパティを式に動的にバインドします。

V-bindは次のように省略されます。クラス属性を要素にバインドできます。バインドには2つの方法があります。1つはオブジェクトメソッドで、もう1つは配列メソッドです。
オブジェクトメソッドはバインドされます{属性:属性値}属性値は変数Trueおよびfalseにすることもできます。Trueはfalseを表示するか、表示しないかです。他のイベントを使用してオブジェクトのプロパティ値を制御し、表示するかどうかを決定することもできます。
配列バインディングメソッド['xxx'、 'xxx']このバインディングメソッドは、引用符を追加すると、要素に直接バインドするのと同じです。引用符を追加しないと、変数と同じになります。検索できます。モデル内のこの変数。見つかった場合、Variableはこの変数の値を追加します。

5.8 v-pre使用法:{ {}}のコンテンツコンパイルしたくない場合

5.9 v-cloakは、Webページの要素が完全にロードされていない場合に使用されます。ページ全体がコンパイルされたら、使用を停止します。

5.10 v-onceは1回だけバインドでき、1回バインドした後、静的にページに書き込みたい要素はVue操作の影響を受けません。

6つのオプション

el:マウント時に管理する必要のある要素を示します

変数またはデータが格納されているデータ

メソッドが関数を格納する場所

ウォッチ:リスナーは変数を監視し、要素の値が変更されると対応する関数をトリガーします

変数を監視する場合は、直接監視できます。オブジェクトを監視する場合は、深く監視し、深く追加する必要があります:true

拡張:オブジェクトのプロパティはオブジェクトのアドレスにバインドされているため、値が変更されてもアドレスは変更されません。そのため、詳細な監視を強力に行う必要があります。

計算されたメソッドと計算されたメソッドの違いには、値が変更されない場合は再度呼び出されないキャッシュがあり、メソッドは実行されるたびに呼び出されます

おすすめ

転載: blog.csdn.net/qq_40629046/article/details/109487696