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 構成コンテナの場所とヒントのまとめ

推薦する

Vue で SuperMap を使用する練習

目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...

Jenkins の紹介と Docker で Jenkins をデプロイする方法

1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...

デジタル時計効果を実現するJavaScript

この記事の例では、JavaScriptでデジタル時計効果を実装するための具体的なコードを参考までに共...

dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...

MySQL の組み込み関数 find_in_set を使用した効率的なあいまい検索の詳細な説明

一般的に使用される方法は次の 4 つです。 1.locate()メソッドを使用する一般的な使用法: ...

MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)

MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

MySQL スケジュールタスク例チュートリアル

序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...

最適なウェブページ幅とその互換性のある実装方法

1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...

Linux の Makefile とは何ですか? どのように機能しますか?

この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...

Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...

Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...

ボタンの 4 つのクリック応答方法の概要

ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...