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 ファイル サービスを素早く構築する方法

推薦する

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...

個人的な意見: デザインについて語る

<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...

美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

Linux CentOS6.5 yum インストール mysql5.6

この記事では、Linux yumを使用してmysql5.6をインストールする簡単な手順を参考までに紹...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...

Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い

最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

MySQLが中国語の文字を挿入する問題を永久に解決するコツを教えます

目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...

ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...