カスタム命令


目次

  • はじめに

  • ##フック関数

  • フック関数のパラメータ

    • 動的コマンド パラメータ

  • #関数の省略形

    • ##オブジェクトリテラル


はじめに

##コア機能に加えて、デフォルトで構築される-in 命令 (v-model

および
v-show

) では、Vue ではカスタム ディレクティブの登録も可能です。 Vue2.0 では、コードの再利用と抽象化の主な形式はコンポーネントであることに注意してください。ただし、場合によっては、通常の DOM 要素に対して低レベルの操作を実行する必要がある場合もあり、その場合にはカスタム ディレクティブが使用されます。次のような、フォーカスされた入力ボックスの例を見てみましょう。

ページが読み込まれると、要素がフォーカスを取得します (注:

autofocus4.gifが動いています（Safari版では動作しません）。実際、このページを開いた後に何もクリックしていない限り、入力ボックスはフォーカスされたままになっているはずです。次に、ディレクティブを使用してこの関数を実装しましょう: 

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

ローカル ディレクティブを登録したい場合、コンポーネントは directives オプションも受け入れます: 

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

その後、次のように、任意の要素に新しい v-focus 属性を追加します: 

<input v-focus>


フック関数

コマンド定義オブジェクトは、次のフック関数を提供できます (すべてオプション):


bind
    : 1 回だけ呼び出されます。初めてディレクティブが要素にバインドされるとき。ここではワンタイムの初期化設定を行うことができます。

  • inserted
    • : バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。

  • update
    • : コンポーネントの VNode が更新されるときに呼び出されます
  • ただし、子 VNode が更新される前に呼び出される場合もあります

    。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます (フック関数のパラメーターの詳細については、以下を参照してください)。

    VNode の詳細については、
    • 後で
レンダリング関数について説明する

ときに紹介します。

次に、フック関数のパラメータ (つまり、el、binding、vnode、 oldVnode)。


#フック関数のパラメータ

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

el を除き、他のパラメータはすべて読み取り専用であり、変更しないでください。フック間でデータを共有する必要がある場合は、要素の dataset を通じて行うことをお勧めします。

#これは、次のプロパティを使用するカスタム フックの例です: 
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

1.jpg


##動的コマンドパラメータ

ディレクティブのパラメータは動的にすることができます。たとえば、v-mydirective:[argument]="value" では、argument パラメータはコンポーネント インスタンス データに基づいて更新できます。これにより、カスタム ディレクティブをアプリケーションで柔軟に使用できるようになります。

たとえば、固定レイアウトを通じてページ上の要素を固定するカスタム ディレクティブを作成するとします。次のようなディレクティブ値によって垂直ピクセル値を更新するカスタム ディレクティブを作成できます。 

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})
new Vue({
  el: '#baseexample'
})

これにより、要素がページの上部から 200 ピクセルの位置に固定されます。しかし、要素を上部ではなく左側に修正する必要があるというシナリオの場合はどうなるでしょうか?現時点では、動的パラメータを使用して各コンポーネントのインスタンスを非常に簡単に更新できます。 

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})
new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

結果:

1.gif

このようにして、このカスタム ディレクティブは、いくつかの異なる使用例をサポートできるほど柔軟になりました。


#関数の省略形

多くの場合、

を使用するとよいでしょう。 binding と update は、他のフックに関係なく、同じ動作をトリガーします。たとえば、次のように記述します。

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})


オブジェクト リテラル

命令で必要な場合複数の値を指定するには、JavaScript オブジェクト リテラルを渡すことができます。ディレクティブ関数はすべての正当な JavaScript 式を受け入れることに注意してください。 


<div v-demo="{ color: 'white', text: 'hello!' }"></div>
rree