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が正常に起動しない原因と解決策を詳しく解説

推薦する

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

マークアップ言語 -

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法

1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...

MySQLメモリストレージエンジンに関する知識

メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...

VirtualBox で作成された Debian 仮想マシンは Windows ホストとファイルを共有します

用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

CentOS 7 に Docker 1.8 をインストールする詳細な手順

Docker は、次の CentOS バージョンでの実行をサポートしています。 • CentOS 7...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

MySQL のダウンロードとインストールの詳細グラフィックチュートリアル

1. MySQLデータベースをダウンロードするには、公式Webサイトにアクセスしてください:http...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...