Vueのフィルターとディレクティブの詳細な説明

Vueのフィルターとディレクティブの詳細な説明

Vueにはローカルフィルターとグローバルフィルターの2種類のフィルターがあります。

フィルターは、いくつかの一般的なテキスト書式設定に使用できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に追加する必要があります。これは、「パイプ」記号で示されます (公式ドキュメント)

<!-- 二重中括弧内 -->
{{ メッセージ | 大文字 }}

<!-- `v-bind` 内 -->
<div v-bind:id="rawId | formatId"></div>

1. パラメータなしでグローバルフィルタを定義する

Vue.filter('capitalize', function(msg){// msgは固定パラメータで、フィルタリングする必要があるデータです。if (!value) return ''
            値 = value.toString()
            戻り値.charAt(0).toUpperCase() + value.slice(1)
       })

2. パラメータ付きのグローバルフィルタを定義する

 <div id="アプリ">
            <p>{{ msg | msgFormat('クレイジー','--')}}</p>
        </div>

        <スクリプト>
            // msgFormat という名前の Vue グローバル フィルターを定義します
            Vue.filter('msgFormat', 関数(msg, arg, arg2) {
                // 文字列置換メソッドでは、最初のパラメータに文字列を書き込むだけでなく、通常の戻り値も定義できます msg.replace(/simple/g, arg+arg2)
            })
      </スクリプト>

3. ローカルフィルター

パラメータ付きおよびパラメータなしのローカル フィルターの定義と使用法は、グローバル フィルターの場合と同じです。唯一の違いは、ローカル フィルターが vue インスタンスで定義されていることです。それが動作する領域は、vueインスタンスによって制御される領域でもある

 // Vueインスタンスを作成し、ViewModelを取得します
            var vm = 新しい Vue({
                el: '#app',
                データ: {
                    メッセージ: 'メッセージ'
                },
                メソッド: {},
                //プライベートローカルフィルターを定義します。フィルターは現在のvueオブジェクトでのみ使用できます: {
                    データフォーマット(メッセージ) {
                        メッセージ+'xxxxx'を返します。
                    }
                }
            });

vueカスタムディレクティブ

Vue には、v-model、v-show、v-html など、多くの組み込み命令がありますが、これらの命令では満足できない場合や、要素に特別な機能を追加したい場合があります。このような場合、Vue の非常に強力な機能であるカスタム命令を使用する必要があります。

始める前に、カスタム命令が解決する問題または使用シナリオは、通常の DOM 要素に対して低レベルの操作を実行することであるため、カスタム命令を盲目的に使用することはできないことを明確にする必要があります。

グローバル指令

Vue.directive('focus', {
  // バインドされた要素が DOM に挿入されると...
  挿入: 関数 (el) {
    // フォーカス要素 el.setAttribute('placeholder', 'これはカスタム命令によって追加されます')
    el.フォーカス()
  }
})

ローカル指示

ディレクティブ: {
  集中:
    // 挿入された命令の定義: function (el) {
      el.フォーカス()
    }
  }
}

使用

<input v-focus>

フック関数(両方ともオプション)

bind: ディレクティブが要素に最初にバインドされるときに 1 回だけ呼び出されます。ここで、1 回限りの初期化セットアップを実行できます。

挿入: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在することを保証するだけで、必ずしもドキュメントに挿入されているわけではありません)。

update: コンポーネントの VNode が更新されたときに呼び出されますが、子 VNode が更新される前に発生することもあります。命令の値は変更されている場合と変更されていない場合があります。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます (詳細なフック関数のパラメータについては以下を参照してください)。

componentUpdated: 命令が配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。

unbind: ディレクティブが要素からアンバインドされたときに 1 回だけ呼び出されます。

使用方法とパラメータ

順番に実行する

//カスタムディレクティブ Vue.directive('focus', {
  バインド: 関数 (el, バインディング, vnode) {
    コンソールログ("1")
  },
  挿入: 関数 (el, バインディング, vnode) {
    コンソールログ("2");
  },
  更新: 関数 (el, バインディング, vnode, oldVnode) {
    コンソールログ("3");
  },
  コンポーネント更新: 関数 (el、バインディング、vnode、oldVnode) {
    コンソールログ('4');
  },
  アンバインド: 関数 (el, バインディング, vnode) {
    コンソールログ('5');
  }
})

以上がVueにおけるフィルターとディレクティブの詳しい説明です。Vueにおけるフィルターとディレクティブについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue フィルターの実装と適用シナリオの詳細な説明
  • Vueフィルターの使い方
  • Vueでグローバルフィルターをカプセル化する手順
  • フィルターvue.filtersの使い方
  • Vue のフィルターの適用シナリオの詳細な説明

<<:  Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル

>>:  Docker 構成コンテナの場所とヒントのまとめ

推薦する

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

Docker を使用した nextcloud パーソナル ネットワーク ディスクの構築に関するチュートリアル

目次1. はじめに2. 導入環境ツール4. 展開プロセス要約する1. はじめにNextcloud は...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

Vite2.x に基づく Vue 3.x プロジェクトの実装

Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

Windows Server 2016 で Flash を有効にする方法

最近、VMware Horizo​​n を導入してテストしましたが、そのコンソールにはデフォルトで ...

MySQL無料インストール版のパスワードの設定と変更に関するチュートリアル

ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...

Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...