フロントエンドフレームワークの学習 - Vue (3)

メモの内容は次のとおりです: Shang Silicon Valley Vue2.0+Vue3.0 入門から習熟までのチュートリアル丨vuejs のフルセット

初识Vue

1. Vue を動作させたい場合は、Vue インスタンスを作成し、構成オブジェクトを渡す必要があります。2.
ルート コンテナ内のコードは HTML 仕様に準拠していますが、特殊な Vue 構文がいくつか混在しています。3.
コードルートコンテナ内 コードは[Vueテンプレート]と呼ばれる;
4. Vueインスタンスとコンテナは1対1で対応する;
5. 実際の開発ではVueインスタンスは1つだけであり、コンポーネントと併用することになる;
6. {{xxx}} の xxx は Write js 式である必要があり、xxx は自动读取データ内のすべての属性にアクセスできます;
7. データ内のデータが変更されると、ページ内のデータが使用される場所も変更されます自动更新。

Vue テンプレートの構文

1. 補間構文:
   • 機能: タグ本体の内容を解析するために使用されます。
   • 書き方：{ {xxx}}, xxxはjs式であり、データ内の全属性を直接読み込むことができます。
2. コマンド構文:
   • 機能: タグを解析するために使用されます (タグ属性、タグ本体の内容、バインディング イベントなど)。
   • 例: v-bind:href="xxx" または省略形: href="xxx"、xxx は js 式を記述する必要もあり、データ内のすべての属性を直接読み取ることができます。
   • 注: Vue には多くの命令があり、その形式は次のとおりです。v-????ここでは例として v-bind を取り上げます。

データバインディング

Vue にはデータ バインディングの方法が 2 つあります。

1. 单向绑定(v-bind): データはデータからページへのみ流れることができます。
2. 双向绑定(v-model): データはデータからページに流れるだけでなく、ページからデータに流れることもできます。

• 述べる：
  1. 双方向バインディングは通常、フォーム要素 (input、select など) に適用されます。
  2. v-model:value は、v-model と省略できます。これは、v-model がデフォルトで value を収集するためです。

elとdataの2つの書き方

データとエルの2つの書き込み方法

1. エルの書き方は2通りあります
   • (1). Vue新規作成時にel属性を設定します。
   • (2). 動的バインディング: 最初に Vue インスタンスを作成し、次に vm.$mount('#root') を通じて el の値を指定します。
2. データの書き込み方法は2通りあります
   • (1). オブジェクトの種類
   • (2). 関数型スタイル
     の選択方法: 現時点ではどのような記述方法でも使用可能ですが、将来コンポーネントを学習する場合、データは関数型スタイルを使用する必要があり、そうでない場合はエラーが報告されます。
3. 重要な原則: Vue によって管理される関数はアロー関数を作成してはなりません。アロー関数が作成されると、これは Vue インスタンスではなくなります。

イベントの基本的な使い方

イベントの基本的な使用法:

1. v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。
2. イベントのコールバックはメソッド オブジェクトで構成する必要があり、最終的には VM 上に配置されます。
3. メソッドで設定された関数はアロー関数を使用しないでください。それ以外の場合、これは VM ではありません。
4. メソッド内で構成された関数はすべて Vue によって管理される関数であり、これは vm またはコンポーネント インスタンス オブジェクトを指します。
5. @click="demo" と @click="demo($event)" は同じ効果がありますが、後者はパラメータを渡すことができます。

$emit子コンポーネントにメソッドを定義し、親コンポーネントのメソッドを実行する

<!--子组件-->
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>
<!--父组件-->
<MyButton @increase-by="(n) => count += n" />

Vue のイベント修飾子:

1. 防止: デフォルトのイベントを防止します (一般的に使用されます)。
2. stop: イベントのバブリングを防止します (一般的に使用されます)。
3. Once: イベントは 1 回だけトリガーされます (一般的に使用されます)。
4. キャプチャ: イベントのキャプチャ モードを使用します。
5. self: イベントは、event.target が現在の操作の要素である場合にのみトリガーされます。
6. パッシブ: イベントのデフォルトの動作は、イベント コールバックの完了を待たずにすぐに実行されます。

キーボードイベント

1. Vue で一般的に使用されるボタンのエイリアス:

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2. Vue はエイリアス キーを提供しません。バインドするキーの元のキー値を使用できますが、ケバブケース (短い水平線の名前) への変換に注意してください。
3. システム修飾キー (特殊な使用法): Ctrl、Alt、Shift、meta
   • (1).キーアップと併用: 修飾キーを同時に押し、次に他のキーを押してから他のキーを放すと、イベントがトリガーされます。
   • (2).キーダウンで使用: 通常のトリガーイベント。
4. keyCode を使用して特定のキーを指定することもできます (非推奨)
5. Vue.config.keyCodes. カスタム キー名 = キー コード、キーのエイリアスをカスタマイズできます

計算されたプロパティ

計算されたプロパティ:

1. 定義: 使用する属性は存在しないため、既存の属性から計算する必要があります。
2. 原則: 最下層は、Objcet.defineproperty メソッドによって提供されるゲッターとセッターを使用します。
3. get関数はいつ実行されますか?
   - (1). 初回読み込み時に1回実行されます。
   - (2). 依存データが変更されると再度呼び出されます。
4. 利点: メソッドの実装と比較して、内部にキャッシュ メカニズム (多重化) があり、より効率的でデバッグが容易です。
5. 備考:
   1. 計算された属性は最終的に VM 上に表示され、直接読み取って使用することができます。
   2. 計算された属性を変更する場合は、変更に応答するように set 関数を記述する必要があります。セット内のデータにより、計算が依存するデータが変更されます。

モニターのプロパティ

監視属性監視:

1. 監視対象のプロパティが変更されると、コールバック関数が自動的に呼び出され、関連する操作が実行されます。
2. 監視されるためには、監視対象属性が存在する必要があります。！
3. モニタリングを記述する 2 つの方法:

• (1). 新しい Vue のときに監視設定を渡す
• (2). vm.$watch による監視

条件付きレンダリング

1. v-ifの書き方：

• (1).v-if="式"
• (2).v-else-if="式"
• (3).v-else="expression" は、
  スイッチング頻度が低いシーンに適しています。
  機能: 表示されていない DOM 要素は直接削除されます。
  注: v-if は、v-else-if、v-else と一緒に使用できますが、構造が「中断」されてはなりません。

2. v-showの書き方
   : v-show="expression" は
   切り替え頻度の高いシーンに適用されます。
   機能: 表示されていない DOM 要素は削除されず、スタイルを使用して非表示になるだけです。
3. 備考: v-if を使用する場合、要素は使用できない場合がありますが、v-show を使用すると使用可能になる必要があります。

リストのレンダリング

v-for ディレクティブ:

1. リストデータを表示するために使用されます
2. 構文: v-for="(項目, インデックス) in xxx" :key="yyy"
3. 走査可能: 配列、オブジェクト、文字列 (ほとんど使用されない)、指定された回数 (ほとんど使用されない)

フォームデータ収集

フォーム データを収集する:
の場合<input type="text"/>、v-model が値を収集し、ユーザーが値を入力します。
次の場合<input type="radio"/>、v-model は value 値を収集し、その value 値をラベルに対して構成する必要があります。
のように：<input type="checkbox"/>

1. 入力の value 属性が構成されていない場合、コレクションはチェックされます (チェックされているかどうか、ブール値です)。
2. input の value 属性を設定します。

• (1) v-model の初期値が非配列の場合、コレクションがチェックされます (チェックの有無はブール値です)。
• 
  (2) v-model の初期値は配列なので、収集されるのは
  数値
  から構成される配列です。 Number
  -trim: 先頭と末尾のスペースを入力してフィルタリングします。

フィルター

フィルタ:
定義: 特定のフォーマット後のデータを表示します (単純なロジック処理に適しています)。
文法：

1. フィルタの登録: Vue.filter(name,callback) または新しい Vue{filters:{}}
2. フィルターを使用します: { { xxx | フィルター名 }} または v-bind: 属性 = "xxx | フィルター名"

述べる：

1. フィルターは追加パラメーターを受け取ることもでき、複数のフィルターを直列に接続することもできます
2. 元のデータは変更せず、対応する新しいデータを生成します