ホームページ ウェブフロントエンド Vue.js vue.js ミックスインとは何ですか?

vue.js ミックスインとは何ですか?

Nov 23, 2020 am 11:01 AM
vue.js

vue.js でのミキシングは、Vue コンポーネントで再利用可能な関数を配布するメソッドまたは計算プロパティです。目的: 1. コンストラクターを作成した後、メソッドまたは一時的なアクティビティを追加する必要があります。メソッドを使用する場合、ミキシングソースコードの汚染を軽減します; 2. パブリックメソッドを使用する場合、混合メソッドを使用すると、コードの量を削減し、コードの再利用を実現できます。

vue.js ミックスインとは何ですか?

  • #この方法は、すべてのブランドのコンピューターに適しています。

ミックスインは、再利用可能なメソッドまたは計算プロパティの一部を定義します。ミックスインには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスイン オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます。

ミックスインには通常 2 つの用途があります:

1. コンストラクターを作成した後、一時的なアクティビティ用のメソッドを追加する必要があります。時間が経つとソースコードの汚染が軽減されます。

2. パブリック メソッドは多くの場所で使用されており、混合方法を使用することでコード量を削減し、コードの再利用を実現できます。

Mixins の基本的な使い方

これで、クリックして数値をインクリメントするプログラムが完成しました。これが完成したとして、データが更新されるたびに、変更 「データが変更されました」というプロンプトをコンソールに出力できます。

コード実装プロセス:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>Mixins Option Demo</title>
</head>
<body>
  <h1>Mixins Option Demo</h1>
  <hr>
  <div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
  </div>
 
  <script type="text/javascript">
    //额外临时加入时,用于显示日志
    var addLog={
      updated:function(){
        console.log("数据放生变化,变化成"+this.num+".");
      }
    }
    var app=new Vue({
      el:&#39;#app&#39;,
      data:{
        num:1
      },
      methods:{
        add:function(){
          this.num++;
        }
      },
      mixins:[addLog]//混入
    })
  </script>
</body>
</html>
ログイン後にコピー

ミックスインの呼び出しシーケンス

実行順序に関しては、混合されたものが最初に実行され、次にコンストラクター内のものが実行されますが、これはメソッドのオーバーライドではなく、両方で実行されることに注意してください。

上記のコードのコンストラクターでは、更新されたフック関数も追加しました:

updated:function(){
   console.log("构造器里的updated方法。")
},
ログイン後にコピー

この時点で、コンソール出力の順序は次のとおりです:


mixins data 変更をリリースし、2.

コンストラクターの更新されたメソッドに変更します。

PS: 混合メソッドとコンストラクター メソッドが同じ名前の場合、混合メソッドは表示できません。つまり、動作しません。

グローバル API ミックスイン メソッド

グローバル ミックスインを定義することもできます。これにより、js を直接導入することでこの機能を実現できます。コードが必要です。グローバル ミキシング メソッドを見てみましょう:

Vue.mixin({
  updated:function(){
    console.log(&#39;我是全局被混入的&#39;);
  }
})
ログイン後にコピー

PS: グローバル ミキシングの実行順序は、ミックスとコンストラクターのメソッドの前です。

関連する推奨事項:


2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング入門をご覧ください。 !

以上がvue.js ミックスインとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vite が .env ファイルを解析する方法についての詳細な説明 vite が .env ファイルを解析する方法についての詳細な説明 Jan 24, 2023 am 05:30 AM

Vue フレームワークを使用してフロントエンド プロジェクトを開発する場合、デプロイ時に複数の環境をデプロイすることになりますが、開発環境、テスト環境、オンライン環境で呼び出されるインターフェイス ドメイン名が異なることがよくあります。どうすれば区別できるでしょうか?それは環境変数とパターンを使用することです。

Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Apr 24, 2023 am 10:52 AM

Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

vue のコンポーネント化とモジュール化の違いは何ですか vue のコンポーネント化とモジュール化の違いは何ですか Dec 15, 2022 pm 12:54 PM

コンポーネント化とモジュール化の違い: モジュール化はコード ロジックの観点から分割され、コードの階層化された開発が容易になり、各機能モジュールの機能の一貫性が保証されます。コンポーネント化は UI インターフェイスの観点から計画され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります。

実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する 実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する Nov 16, 2022 pm 08:43 PM

vscode 自体は、定義にジャンプするための Vue ファイル コンポーネントをサポートしていますが、そのサポートは非​​常に弱いです。 vue-cli の構成では、多くの柔軟な使用法を記述することができるため、制作効率が向上します。しかし、これらの柔軟な記述方法により、vscode 自体が提供する関数がファイル定義へのジャンプをサポートできなくなります。これらの柔軟な記述方法に対応し、作業効率を向上させるために、Vue ファイルの定義へのジャンプをサポートする vscode プラグインを作成しました。

vue3 の reactive() について詳しく話しましょう vue3 の reactive() について詳しく話しましょう Jan 06, 2023 pm 09:21 PM

前書き: vue3 の開発では、reactive は応答性の高いデータを実装するメソッドを提供します。これは日常の開発で頻繁に使用される API です。この記事では、著者はその内部動作メカニズムを探ります。

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析) JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析) Mar 23, 2023 pm 07:53 PM

Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザー インターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。

vue がファイル スライス アップロードを実装する方法の簡単な分析 vue がファイル スライス アップロードを実装する方法の簡単な分析 Mar 24, 2023 pm 07:40 PM

実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイル ストリームはいくつかの小さなファイル ストリームに分割され、インターフェイスはそれぞれの小さなファイル ストリームを配信するように要求されます。

See all articles