1. Mixinの基本的な使い方これで、クリックすると数字が増加するプログラムができました。これが完成したら、データが変更されるたびに、コンソールに「データが変更されました」というプロンプトが表示されるようになることを期待します。 コード実装プロセス: <div id="アプリ"> <p>数値:{{数値}}</p> <P><button @click="add">数量を追加</button></P> </div> <スクリプト> var ログを追加 = { // 更新フックをvueインスタンスにミックスする updated() { console.log("データが " + this.num + " に変更されます。"); } } var アプリ = 新しい Vue({ el: '#app', データ: { 番号: 1 }, メソッド: { 追加: 関数 () { this.num++; } }, ミックスイン: [addLog], //mixin}) </スクリプト> ボタンをクリックすると、混合 addLog 内の更新されたメソッドがトリガーされます。 2. ミックスインの呼び出し順序
上記のコードのコンストラクターに更新されたフック関数も追加しました。 <div id="アプリ"> <p>数値:{{数値}}</p> <P><button @click="add">数量を追加</button></P> </div> <スクリプト> var ログを追加 = { 更新: 関数() { console.log("データが " + this.num + " に変更されます。"); } } var アプリ = 新しい Vue({ el: '#app', データ: { 番号: 1 }, メソッド: { 追加: 関数 () { this.num++; } }, 更新: 関数 () { console.log("コンストラクター内のメソッドが更新されました。") }, ミックスイン: [addLog], //mixin}) </スクリプト> 3. グローバルミックスイン方式グローバル ミックスインは、ミックスインおよびコンストラクター メソッドの前に実行されます。 <div id="アプリ"> <p>数値:{{数値}}</p> <P><button @click="add">数量を追加</button></P> </div> <スクリプト> Vue.mixin({ 更新: 関数 () { console.log('私はグローバルに混在しています'); } }) var ログを追加 = { 更新: 関数() { console.log("データが " + this.num + " に変更されます。"); } } var アプリ = 新しい Vue({ el: '#app', データ: { 番号: 1 }, メソッド: { 追加: 関数 () { this.num++; } }, 更新: 関数 () { console.log("コンストラクター内のメソッドが更新されました。") }, ミックスイン: [addLog], //mixin}) </スクリプト> 順次要約: 2つのオブジェクトキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアを取得します。ミックスインとコンポーネント オブジェクトの両方にテスト メソッド (同じ名前) がある場合、最終的な値はコンポーネント オブジェクトのキーと値のペアになります。 <div id="アプリ"> <p>数値:{{数値}}</p> <P> <button @click="add">数量を追加</button> </P> </div> <スクリプト> var ログを追加 = { 更新: 関数 () { console.log("データが " + this.num + " に変更されます。"); これをテストします。 }, メソッド: { テスト: 関数 () { console.log('ミックスインでのテスト') } } } var アプリ = 新しい Vue({ el: '#app', データ: { 番号: 1 }, メソッド: { 追加: 関数 () { this.num++; }, テスト:関数(){ console.log('コンポーネントオブジェクト内のテスト') } }, ミックスイン: [addLog], //mixin}) </スクリプト> Vue.js ミックスインに関する記事はこれで終わりです。Vue.js ミックスインについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux のごみ箱メカニズムの実装プロセスと使用方法の詳細な説明
>>: ZabbixはSNMPに基づいてLinuxホストを監視します
目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...
目次1. 概要2. メモリ管理3. ガベージコレクション4. GCアルゴリズムの紹介5. 参照カウン...
目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...
目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...
質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...
目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...
目次1. Dockerの設定2. レジストリとネットワークを作成する3. コンテナを起動する環境説明...
目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...
序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...
プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...
戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...
最近人気のWeChatタップ機能を見て、CSS3アニメーションを見直し、このボックスシェイクアニメー...
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...