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 の 以下もご興味があるかもしれません:
|
最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...
最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...
一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...
目次効果のデモンストレーション:メインJSコード実装 <div class="box...
Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...
仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...
CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...
目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...
冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...
たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...
コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...
1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...
MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...