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
    }
}

（２）使用方法

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

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

• 多用途

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

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

（３）フィルタパラメータ

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

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

• フィルタの本質は関数なので、フィルタ関数を1つのファイルに直接カプセル化することができます。

// 関数を定義する const filterA = () => {}
定数フィルターB = () => {}
// 関数オブジェクトをエクスポートする export { filterA, filterB }

• 次に、関数を必要なコンポーネントにインポートし、フィルターとして登録します。

'./filters.js' からフィルターとして * をインポートします。
//filters.js 内のメソッドを走査します Object.keys(filters).forEach(key => { 
  Vue.filter(キー、フィルター[キー])
})

カスタムディレクティブ

01. 何ですか

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

02. 基本概念

（１）フック機能

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

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

（２）パラメータ

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

• 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. コマンド登録

（１）グローバル登録

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

• 最初のパラメータはカスタムコマンド名です。コマンド名にv-をプレフィックスとして付ける必要はありません。プレフィックスはデフォルトで自動的に追加されます。コマンドを使用するときにプレフィックスを追加するだけです。
• 2番目のパラメータはオブジェクトデータまたはコマンド関数になります

Vue.directive("ディレクティブ名", {
    挿入: function(el){
        // 何かをする
    }
})

（２）現地登録

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

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

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