vueフィルタおよびカスタムコマンド

4910 ワード

vueフィルタおよびカスタム命令
フィルタ

プライベートフィルタ

filters: {
    capitalize: function (msg) {
      return msg.replace('  ', '**')
    }
  },

グローバルフィルタ

Vue.filter('globalFilter', function (msg) {
  return msg.replace('  ', '**')
})

使用:{{data name|filter name}}

カスタムコマンド

プライベート

directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

グローバル

Vue.directive('focus', {
  bind: function (el) {

  },
  inserted: function (el) {
    //     
    el.focus()
  }
})

命令の定義にはv-を加える必要はなく、使用にはv-

を加える必要がある.

フック関数

bind:1回のみ呼び出し、命令が要素に最初にバインドされたときに

を呼び出す.

inserted:バインド要素が親ノードに挿入するときに呼び出され、親ノードが存在することを保証するが、必ずしもドキュメントに挿入されたとは限らない

update:あるコンポーネントのVNode更新時に呼び出されるが、そのサブVNode更新の前に

が発生する可能性がある.

フック関数パラメータ

el:DOM

を直接操作するために使用できる命令にバインドされた要素.

binding:次の属性が含まれます.

name:v-プレフィックスを含まない命令名.

value:命令のバインド値、例えば、v-my-directive="1 + 1"のうち、バインド値は2である.

oldValue:命令バインディングの前の値で、updateおよびcomponentUpdatedフックでのみ使用できます.

expression:文字列形式の命令式.例えばv-my-directive="1 + 1"において、式は"1 + 1"

である.

arg:命令に伝達されるパラメータ.オプション.例えばv-my-directive:fooにおいて、パラメータは"foo"

である.

modifiers:修飾子を含むオブジェクト.例えば、v-my-directive.foo.barにおいて、修飾子オブジェクトは{ foo: true, bar: true }

である.