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ホストを監視します
質問: int(1) と tinyint(1) の違いは何ですか?このような設計では、いずれにしても...
1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...
mysql を構成するときに、構成ファイル内のデフォルトのストレージ エンジンを InnoDB に設...
目次1. メモリモデルとランタイムデータ領域2. マインドマップと凡例3. オブジェクトはJVMから...
1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...
企業が Docker 自動デプロイメントを構築する場合、Docker の実行時にコンテナ内の設定ファ...
ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...
1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...
目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...
エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...
VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...
mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...
方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...
フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...
1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...