目次
メモの内容は次のとおりです: 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 テンプレートの構文
- 補間構文:
- 機能: タグ本体の内容を解析するために使用されます。
- 書き方:
{ {xxx}}
, xxxはjs式であり、データ内の全属性を直接読み込むことができます。- コマンド構文:
- 機能: タグを解析するために使用されます (タグ属性、タグ本体の内容、バインディング イベントなど)。
- 例: v-bind:href="xxx" または省略形: href="xxx"、xxx は js 式を記述する必要もあり、データ内のすべての属性を直接読み取ることができます。
- 注: Vue には多くの命令があり、その形式は次のとおりです。
v-????
ここでは例として v-bind を取り上げます。
データバインディング
Vue にはデータ バインディングの方法が 2 つあります。
单向绑定(v-bind)
: データはデータからページへのみ流れることができます。双向绑定(v-model)
: データはデータからページに流れるだけでなく、ページからデータに流れることもできます。
- 述べる:
- 双方向バインディングは通常、フォーム要素 (input、select など) に適用されます。
- v-model:value は、v-model と省略できます。これは、v-model がデフォルトで value を収集するためです。
elとdataの2つの書き方
データとエルの2つの書き込み方法
- エルの書き方は2通りあります
- (1). Vue新規作成時にel属性を設定します。
- (2). 動的バインディング: 最初に Vue インスタンスを作成し、次に vm.$mount('#root') を通じて el の値を指定します。
- データの書き込み方法は2通りあります
- (1). オブジェクトの種類
- (2). 関数型スタイル
の選択方法: 現時点ではどのような記述方法でも使用可能ですが、将来コンポーネントを学習する場合、データは関数型スタイルを使用する必要があり、そうでない場合はエラーが報告されます。- 重要な原則: Vue によって管理される関数はアロー関数を作成してはなりません。アロー関数が作成されると、これは Vue インスタンスではなくなります。
イベントの基本的な使い方
イベントの基本的な使用法:
- v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。
- イベントのコールバックはメソッド オブジェクトで構成する必要があり、最終的には VM 上に配置されます。
- メソッドで設定された関数はアロー関数を使用しないでください。それ以外の場合、これは VM ではありません。
- メソッド内で構成された関数はすべて Vue によって管理される関数であり、これは vm またはコンポーネント インスタンス オブジェクトを指します。
- @click="demo" と @click="demo($event)" は同じ効果がありますが、後者はパラメータを渡すことができます。
$emit
子コンポーネントにメソッドを定義し、親コンポーネントのメソッドを実行する
<!--子组件-->
<button @click="$emit('increaseBy', 1)">
Increase by 1
</button>
<!--父组件-->
<MyButton @increase-by="(n) => count += n" />
Vue のイベント修飾子:
- 防止: デフォルトのイベントを防止します (一般的に使用されます)。
- stop: イベントのバブリングを防止します (一般的に使用されます)。
- Once: イベントは 1 回だけトリガーされます (一般的に使用されます)。
- キャプチャ: イベントのキャプチャ モードを使用します。
- self: イベントは、event.target が現在の操作の要素である場合にのみトリガーされます。
- パッシブ: イベントのデフォルトの動作は、イベント コールバックの完了を待たずにすぐに実行されます。
キーボードイベント
- Vue で一般的に使用されるボタンのエイリアス:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
- Vue はエイリアス キーを提供しません。バインドするキーの元のキー値を使用できますが、ケバブケース (短い水平線の名前) への変換に注意してください。
- システム修飾キー (特殊な使用法): Ctrl、Alt、Shift、meta
- (1).キーアップと併用: 修飾キーを同時に押し、次に他のキーを押してから他のキーを放すと、イベントがトリガーされます。
- (2).キーダウンで使用: 通常のトリガーイベント。
- keyCode を使用して特定のキーを指定することもできます (非推奨)
- Vue.config.keyCodes. カスタム キー名 = キー コード、キーのエイリアスをカスタマイズできます
計算されたプロパティ
計算されたプロパティ:
- 定義: 使用する属性は存在しないため、既存の属性から計算する必要があります。
- 原則: 最下層は、Objcet.defineproperty メソッドによって提供されるゲッターとセッターを使用します。
- get関数はいつ実行されますか?
- (1). 初回読み込み時に1回実行されます。
- (2). 依存データが変更されると再度呼び出されます。- 利点: メソッドの実装と比較して、内部にキャッシュ メカニズム (多重化) があり、より効率的でデバッグが容易です。
- 備考:
1. 計算された属性は最終的に VM 上に表示され、直接読み取って使用することができます。
2. 計算された属性を変更する場合は、変更に応答するように set 関数を記述する必要があります。セット内のデータにより、計算が依存するデータが変更されます。
モニターのプロパティ
監視属性監視:
- 監視対象のプロパティが変更されると、コールバック関数が自動的に呼び出され、関連する操作が実行されます。
- 監視されるためには、監視対象属性が存在する必要があります。!
- モニタリングを記述する 2 つの方法:
- (1). 新しい Vue のときに監視設定を渡す
- (2). vm.$watch による監視
条件付きレンダリング
- v-ifの書き方:
- (1).v-if="式"
- (2).v-else-if="式"
- (3).v-else="expression" は、
スイッチング頻度が低いシーンに適しています。
機能: 表示されていない DOM 要素は直接削除されます。
注: v-if は、v-else-if、v-else と一緒に使用できますが、構造が「中断」されてはなりません。
- v-showの書き方
: v-show="expression" は
切り替え頻度の高いシーンに適用されます。
機能: 表示されていない DOM 要素は削除されず、スタイルを使用して非表示になるだけです。- 備考: v-if を使用する場合、要素は使用できない場合がありますが、v-show を使用すると使用可能になる必要があります。
リストのレンダリング
v-for ディレクティブ:
- リストデータを表示するために使用されます
- 構文: v-for="(項目, インデックス) in xxx" :key="yyy"
- 走査可能: 配列、オブジェクト、文字列 (ほとんど使用されない)、指定された回数 (ほとんど使用されない)
フォームデータ収集
フォーム データを収集する:
の場合<input type="text"/>
、v-model が値を収集し、ユーザーが値を入力します。
次の場合<input type="radio"/>
、v-model は value 値を収集し、その value 値をラベルに対して構成する必要があります。
のように:<input type="checkbox"/>
- 入力の value 属性が構成されていない場合、コレクションはチェックされます (チェックされているかどうか、ブール値です)。
- input の value 属性を設定します。
- (1) v-model の初期値が非配列の場合、コレクションがチェックされます (チェックの有無はブール値です)。
(2) v-model の初期値は配列なので、収集されるのは
数値
から構成される配列です。 Number
-trim: 先頭と末尾のスペースを入力してフィルタリングします。
フィルター
フィルタ:
定義: 特定のフォーマット後のデータを表示します (単純なロジック処理に適しています)。
文法:
- フィルタの登録: Vue.filter(name,callback) または新しい Vue{filters:{}}
- フィルターを使用します: { { xxx | フィルター名 }} または v-bind: 属性 = "xxx | フィルター名"
述べる:
- フィルターは追加パラメーターを受け取ることもでき、複数のフィルターを直列に接続することもできます
- 元のデータは変更せず、対応する新しいデータを生成します