Vue の高度な構築プロパティの詳細な説明

Vue の高度な構築プロパティの詳細な説明

1. ディレクティブカスタムディレクティブ

Vue フレームワークのコードでは、ネイティブ DOM 操作はほとんど使用されません。これは、ネイティブ DOM 操作が Vue の命令にカプセル化されているためです。たとえば、先ほど見た <div v-text="xxx"></div> 命令には、実際には次の内部操作があります。

div.innerText = xxx; //もちろん、ここでのdivは取得したDOM要素です

Vue はネイティブ DOM 操作を命令にカプセル化します。要素が命令を使用する場合は、HTML テンプレートの要素タグの属性として直接使用できます。シンプルで便利であり、重複を減らします。

しかし、Vue はすべての DOM 操作を考慮して対応する命令にカプセル化することはできません。開発者が実際に使用するまでわからない DOM 操作もあります。そのため、Vue はユーザーが命令をカスタマイズする方法を提供しており、それは大きく分けて次の 2 種類に分けられます。

カスタム命令はカスタム コンポーネントに似ており、グローバルとローカルに分けられます。以下は、文字y印刷するためのカスタム命令vyを例にしています。

グローバル指令

グローバル プロパティは、Vue が提供する特定の関数に登録されます。

Vue.directive("y", {
  挿入: function(el) {
    el.addEventListener("click", () => console.log("y"));
  }
});

ローカル指示

ディレクティブを定義するテンプレートでのみ使用できます

完全版のテンプレート属性に含めることができます

メイン.js

新しいVue({
  テンプレート:`
    <div vy>
      <button>クリック</button>
    </div>
  `、
  ディレクティブ:{
    'y':{
      挿入: function(el) {
        el.addEventListener("click", () => console.log("y"));
      }
    }
  }
}).$mount("#app");

または、不完全なバージョンの.vueファイルのエクスポートデフォルト{}で

アプリ

<テンプレート>
    <div>
      <button vy>クリック</button>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
      ディレクティブ:{
        'y':{
          挿入: function(el) {
            el.addEventListener("click", () => console.log("y"));
          }
        }
      }
    };
</スクリプト>

ディレクティブオプション

命令オブジェクトには5つの関数属性があります

{
    bind: function (el,info,vnode,oldVnode) {}, //要素がメモリ内に作成されたときに実行されます。 insert: function (パラメータは上記と同じ) {}, //要素がページに挿入されたときに実行されます。 update: function (パラメータは上記と同じ) {}, 
    componentUpdated: 関数 (パラメータは上記と同じ) {}, 
    unbind: 関数 (パラメータは上記と同じ) {} //要素が消えたときに実行}

関数属性パラメータでは、el は命令を呼び出す要素を参照し、info にはすべての情報が含まれます。必要な場合は、info で検索するだけです。

2. ミックスイン

ミックスインの主な目的は、構築オプションの重複を減らすことです。重複する構築オプションを別の *.js ファイルに抽出し、それをインポートしてから、ミックスイン属性を通じて構築オプションにミックスすることができます。

minxin は、単純にコピーするのではなく、追加されたミックスインと現在のオプションに基づいてインテリジェントにミックスされるスマート ミックスインです。

3. 継承を拡張する

継承とミックスインは似たような機能を持っていますが、extend の方が抽象的です。どちらも構築オプションの繰り返しを簡素化します。Extend は、元の Vue シェルに基づいて独自に定義されたプロパティを固定プロパティとして追加し、それを使用して Vue オブジェクトを作成するときに Vue を継承するカスタムクラス MyVue を作成できます。

マイビュー

定数MyVue = Vue.extend({
    minxins: [ログ]
});

デフォルトの MyVue をエクスポートします。

4. 提供して注入する

親は共通のデータやメソッドを提供する

{
    //...
    提供する(){
        戻る {
            xx: this.changexx、
            yy: これを変更yy
        }
    },
    方法:{
        チェンジxx(){
            //...
        },
        チェンジ(){
            //...
        }
    }
}

子孫はデータを変更するために何かを注入する

{
    挿入: ["changexx", "changeyy"]
}

これは .sync 修飾子と少し似ていますが、より一般的です。

以上がVueの高度な構造プロパティの詳細な説明です。Vueの高度な構造プロパティの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue の計算プロパティとリスナーの使用の概要
  • VueのCSS属性値の1つを動的に変更する
  • Vue の計算プロパティとリスニングプロパティ
  • Vueでループオブジェクトのプロパティと属性値を使用する方法
  • Vueはデータ内の属性値に応じて異なるスタイルを設定することを実装しています
  • vueは、未定義の値、空の値、またはプリミティブ値に対してリアクティブプロパティを設定できない問題を解決します。
  • Vueの計算プロパティとウォッチの違いを簡単に理解する
  • Vue が mapState で定義された属性にエラーを割り当てる問題を解決する
  • Vue 構築オプション - 高度な使用方法の説明

<<:  MySQL8 でパスワードを忘れた後にパスワードをリセットする方法 (MySQL の古い方法は機能しません)

>>:  FileZilla を使用して FTP ファイル サービスを素早く構築する方法

推薦する

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

CSSを使用して円形の波効果を実現する

モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果...

ボタントリガーイベントを使用して背景色の点滅効果を実現します

背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...

CSS3は円錐グラデーション効果を実現します

文法:背景画像: 円錐グラデーション(位置の角度から、開始色、...、最後の色)最初のパラメータ:開...

MySQLの基本の共通機能

目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...

Vueは小さなカウントダウン機能を実装します

多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

スケルトン スクリーンの読み込みプレースホルダー アニメーション効果を実装するための CSS + HTML (アニメーション付き)

効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

Springboot プロジェクトの Docker-compose イメージリリースプロセス分析

導入Docker-Compose プロジェクトは、Docker コンテナ クラスターの迅速なオーケス...

MySQLで最大接続数を達成する方法

目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...