1 はじめにVueインスタンスを作成するときに、オプションオブジェクトを渡すことができます。 定数vm = 新しいVue({ データ: { メッセージ: 'こんにちは' }, 計算: {}, メソッド: {}, 時計: {} }) このオプション オブジェクトでは、多くのオプション (または属性) を指定できます。データ関連のオプションには、 このうち、 2 基本的な使い方
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <title>メソッド</title> <!-- vue.js をインポート --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <本文> </本文> <スクリプト> </スクリプト> </html> 2.1 方法
<本文> <div id="例"> <!-- 表示: a:1 --> <p>a:{{ プラス() }}</p> </div> </本文> <スクリプト> 定数vm = 新しいVue({ el: "#例", データ: { : 0, }, メソッド: { プラス: 関数 () { this.a + 1 を返します。 }, }, }); console.log(vm); // vm のコンソール出力を表示すると、メソッド plus: ƒ () があることがわかります。⚠️メソッドであることに注意してください。 console.log(vm.plus()); // vm インスタンスを介してメソッドに直接アクセスします。出力: 1 </スクリプト>
2.2 計算プロパティ
<本文> <div id="例"> <!-- 表示: a:1 --> <p>a:{{ プラス }}</p> </div> </本文> <スクリプト> 定数vm = 新しいVue({ el: "#例", データ: { : 0, }, 計算: { プラス: 関数 () { this.a + 1 を返します。 }, }, }); console.log(vm); // // コンソールで vm 出力を確認すると、属性 plus:1 があることがわかります。⚠️これは属性であることに注意してください</script> 一見すると、 実際、2 つの違いは、vm インスタンスとアクセス メソッドを印刷することで反映されています。
さらに、メソッドとは異なり、計算プロパティは、依存するデータの変更に応じて応答的に更新されます。つまり、a が変更されると、 2.3 リスナーを見る
<本文> <div id="例"> <!-- 表示: a:1 --> <p>a:{{ a }}</p> </div> </本文> <スクリプト> 定数vm = 新しいVue({ el: "#例", データ: { : 0, }, 時計: a: 関数() { console.log("a has changed"); // a の値が変更されたため、コールバック関数は console.log(this.a); を実行します。 }, }, }); vm.a = 1; // ここで a の値を手動で変更します</script> 3つの違い3.1 メソッドと計算プロパティ2.2 で述べた 2 つの違いに加えて、最も重要な違いは次のとおりです。
次の表は、両者の違いをまとめたものです。
3.2 計算プロパティとリスナー
1つ以上のデータから値を計算する必要がある場合は、計算プロパティを使用します。 リスニングプロパティは主に、特定の値の変化を監視し、必要な論理処理を実行するために使用されます。また、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合は、リスニングプロパティがより便利です。具体的な例については、vueドキュメントのリスナーを参照してください。 Vue の 以下もご興味があるかもしれません:
|
このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...
mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...
1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...
水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...
旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
MySQL 8.0: InnoDB のラージ オブジェクトに対する MVCCこの記事では、MySQL...
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
具体的なコードは次のとおりです。 <div id="ボックス"> &...
以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...
目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...
システム パフォーマンスの専門家である Brendan D. Gregg 氏は、LinuxCon N...
MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...