vue学習メモ(2) --vue入門

この記事では Vue の概要の一部を紹介しますので、興味のある方はぜひご覧ください

この学習は主に公式 Web サイト https://cn.vuejs.org/v2/guide

A のチュートリアルから得ています。 Vue の例

vue アプリケーションはルート Vue インスタンスから始まります。 Vue はデータをデータにバインドします。データが変更されると、ビューも変更されます (オブザーバー モード)。これにより、データの双方向バインディング (応答性) を実現できます。 vue インスタンス内の属性は、$+属性名で取得できます。 $data

vue を入力すると、初期化後に要素が再度追加された場合、ビューは変更されません。

2 Vue ライフサイクル

vue インスタンスの初期化プロセスには、データ監視の設定、テンプレートのコンパイル、DOM へのインスタンスのマウント、データ更新時の DOM の更新などの一連のプロセスが含まれます。このプロセスにはいくつかのライフサイクル フック関数があり、このプロセスに独自のコードを追加してさまざまな関数を実装できます。
Vue のライフサイクル図は次のとおりです:

3 つの Vue テンプレート

vue テンプレートはすべて正当な HTML であり、HTML 構文に基づいています。 Vue はテンプレートを仮想 DOM にレンダリングします。
vue は、JSX 構文による render 関数を通じて DOM レンダリングを実装できます。
vue は補間にプレースホルダーである {{}} を使用します。フリーメーカーに似ています。 {{}} はテキスト文字列を挿入します。v-html を使用すると、実際の HTML コードが挿入されます [xss が発生するため、注意して使用してください]。
Vue の共通コマンド:

• v-bind: HTML 属性をバインドできます。xx

• v-on: イベントをバインドできます。@xxxx

• v-model と省略できます。 : 双方向バインディングデータ

• v-if: 判定ステートメント、v-if は要素とともに使用する必要があります。複数の要素がある場合、複数のステートメントをラップするために