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

フィルターは、いくつかの一般的なテキスト書式設定に使用できます。フィルターは、二重中括弧補間と 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内の他の関連記事もぜひご覧ください！

以下もご興味があるかもしれません: