Vueフィルターとカスタム命令の使用

Vueフィルターとカスタム命令の使用

フィルター

01. 何ですか

フィルターは渡されたデータに対して必要な処理を実行し、処理結果を返します。

  • フィルターはデータを変更しない
  • フィルターの本質は機能である
  • フィルター関数には、処理するソース データを含むパラメーターが必要です。
  • フィルタには戻り値があり、処理された結果を返す必要があります。
エクスポートデフォルト{
    // フィルターを使用してローカルフィルターを作成します。フィルター:{
        フィルター名(データ){
            // 受信したデータを処理し、処理結果を返します}  
    }
}

02. やり方

(1)フィルターを定義する

  • ローカル フィルター: コンポーネント内で定義され、現在のコンポーネント内でのみ使用できます。

フィルター構造を通じて作成された

エクスポートデフォルト{
    // フィルターを使用してローカルフィルターを作成します。フィルター:{
      フィルター名(データ){
          // 処理結果を返す処理}  
    }
}
  • グローバルフィルター: Vue.filter を通じてグローバルフィルターを作成します。一度に作成できるのは 1 つだけで、どのコンポーネントでも使用できます。

Vueインスタンスが作成される前に定義する必要がある

Vue.filter(フィルタ名, (データ) => {
    // 何かをする
    処理結果を返す})

別のファイルにグローバルフィルターを作成し、必要なコンポーネントにインポートしてフィルターに登録します。

'vue' から Vue をインポートします
// Vue.filter を通じてグローバルフィルターを作成する const filter1 = Vue.filter(filter name, (data) => {
    // 何かをする
    処理結果を返す})
// エクスポート export {
    フィルター1
}
//コンポーネント内で、filterimport { filter1 } from '@/utils/filters.js' を導入します。

エクスポートデフォルト{
    // コンポーネント内のフィルターにフィルターを追加します // フィルターはフィルターの作成と登録の両方が可能です // フィルターに登録されたフィルターのみがフィルターとみなされます フィルター: {
        フィルター1
    }
}

(2)使用方法

  • 補間式 {{}} または v-bind 式では、パイプライン演算子 ——| とともにフィルターを使用します。
  • フォーマット: {{ ソースデータ | フィルター }}
<div> {{ データ | フィルター }} </div>
  • 多用途

フィルターは複数の並列使用をサポートしており、前者の処理結果は後者のパラメータとして渡されます。

<div> {{ データ | フィルター1 | フィルター2 }}</div>

(3)フィルタパラメータ

  • パラメータが手動で渡されない場合、パイプ文字の前のデータがデフォルトで渡されます。
  • パラメータを手動で渡す場合、デフォルトパラメータの渡しには影響しません。
    • フィルター関数の最初のパラメーターは常にパイプ文字の前のデータになります。
    • 手動で渡されるパラメータは、パラメータ リストの 2 番目のパラメータから始まり、順番に逆方向に進みます。

03. フィルター関数をカプセル化する

  • フィルタの本質は関数なので、フィルタ関数を1つのファイルに直接カプセル化することができます。
// 関数を定義する const filterA = () => {}
定数フィルターB = () => {}
// 関数オブジェクトをエクスポートする export { filterA, filterB }
  • 次に、関数を必要なコンポーネントにインポートし、フィルターとして登録します。
'./filters.js' からフィルターとして * をインポートします。
//filters.js 内のメソッドを走査します Object.keys(filters).forEach(key => { 
  Vue.filter(キー、フィルター[キー])
})

カスタムディレクティブ

01. 何ですか

  • 通常のDOM要素に対して低レベルの操作を実行するには、カスタム命令が使用されます。
    • つまり、カスタム命令は主にDOM要素に対して動作する。

02. 基本概念

(1)フック機能

ディレクティブ定義オブジェクトは、次のフック関数を提供できます (すべてオプション)。

  • bind: ディレクティブが最初に要素にバインドされるときに 1 回だけ呼び出されます。このフック関数は、バインド中に 1 回実行される初期化イベントを定義するために使用できます。
  • 挿入: 親ノードが存在する限り、バインドされた要素が親ノードに挿入されたときに呼び出されます。ドキュメントに挿入されていない場合でも呼び出されます。
  • update: バインドされた値が変更されるかどうかに関係なく、バインドされた要素が属するコンポーネントが更新されたときに呼び出されます。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます。
  • componentUpdated: バインドされた要素のすべてのコンポーネントが更新されたとき、つまり更新サイクルが完了したときに呼び出されます。
  • unbind: 命令が要素からアンバインドされたときに一度だけ呼び出されます

(2)パラメータ

コマンド フック関数には次のパラメータが渡されます。

  • el: 命令がバインドされている要素。DOMを直接操作するために使用できます。つまり、命令が配置されている要素です。
  • バインディング: 複数の属性を含むオブジェクト
    • name: コマンド名(v-プレフィックスなし)
    • value: 命令にバインドされた値。オブジェクトをバインドして複数の値を渡すことができます。
    • oldValue: ディレクティブにバインドされた古い値。値が変更されたかどうかに関係なく、update フックと componentUpdated フックでは使用できません。
    • 式: 文字列形式のコマンド式
    • arg: コマンドに渡されるパラメータ
    • 修飾子: 修飾子を含むオブジェクト
  • vnode: Vue コンパイルによって生成された仮想ノード
  • oldVnode: 以前の仮想ノード。update および componentUpdated フックでのみ使用可能
// <div v-demo:left="100"></div>
// ここでの左側はコマンドのバインディングオブジェクトの引数です
// 100はコマンドのバインディングオブジェクトの値です
Vue.directive('デモ',{
    // el--バインドされた要素、つまり命令が配置されている要素を示しますbind(el,binding,vnode){
        // この要素を直接処理できます el.style.position = 'fixed';
        const s = ( binding.arg == 'left' ? 'left' : top );
        el.style[s] = binding.value + 'px';
    }
})

03. コマンド登録

(1)グローバル登録

Vue.directive() を介してグローバル ディレクティブを登録します。これには 2 つのパラメータが含まれます。

  • 最初のパラメータはカスタムコマンド名です。コマンド名にv-をプレフィックスとして付ける必要はありません。プレフィックスはデフォルトで自動的に追加されます。コマンドを使用するときにプレフィックスを追加するだけです。
  • 2番目のパラメータはオブジェクトデータまたはコマンド関数になります
Vue.directive("ディレクティブ名", {
    挿入: function(el){
        // 何かをする
    }
})

(2)現地登録

Vueインスタンスにディレクティブオブジェクトデータを追加して、ローカルカスタムディレクティブを登録します。

エクスポートデフォルト{
    ディレクティブ: {
        コマンド名: {
            関数}
    }
}

上記は、vue フィルターとカスタム命令の使用に関する詳細な内容です。vue フィルターとカスタム命令の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue でのローカル フィルタとグローバル フィルタ コードの実践的な操作
  • Vue.js フィルターについてどれくらい知っていますか?
  • Vueフィルターの詳細な説明
  • Vueのフィルターについて知っておくべきこと
  • vue3がフィルターを削除する理由
  • Vue のフィルターを本当に理解していますか?

<<:  Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

>>:  Dockerが正常に起動しない原因と解決策を詳しく解説

推薦する

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

ログインボックスのドラッグ効果を実現するためのJavascript

この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...

Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...

CSS セレクタのグループ化の簡単な分析

セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...

JavaScriptの構文とコード構造に関する深い理解

目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...

Ubuntuがインターネットに接続できない場合の解決策

問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...

cmd と python での MySQL の一般的な操作についての簡単な説明

環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...

Vue3 を使用してポップアップ コンポーネントをカプセル化するのは簡単ですか?

目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...