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

ホームページ

ウェブフロントエンド

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 id="Mixins-nbsp-Option-nbsp-Demo">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 までご連絡ください。

React vs. Vue：Netflixはどのフレームワークを使用していますか？Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact：重要な違いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React：プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

Vueにタグをジャンプする方法Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEのコンポーネントジャンプを実装する方法Apr 08, 2025 am 09:21 AM

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと＆lt; router-view＆gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。＆lt; router-view＆gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push（）およびrouter.replace（）メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。

See all articles