vueカスタムディレクティブ

デフォルトのコア ディレクティブ (v-model および v-show) に加えて、Vue ではカスタム ディレクティブの登録も可能です。 Vue2.0 では、コード再利用の主な形式と抽象化はコンポーネントであることに注意してください。ただし、場合によっては、純粋な DOM 要素に対して低レベルの操作を実行する必要があり、その場合にはカスタム ディレクティブが使用されます。

ページが読み込まれると、要素がフォーカスを取得します (注: オートフォーカスはモバイル Safari では機能しません)。実際、このページを開いた後に何もクリックしていない限り、入力ボックスはフォーカスされたままになっているはずです。次に、この関数を実装するための命令を使用してみましょう: (推奨される学習: JavaScript ビデオ チュートリアル )

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

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

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

これにより、次のように、テンプレート内の任意の要素で新しい v-focus 属性を使用できるようになります:

<input v-focus>

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

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

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

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

componentUpdated: 命令が配置されているコンポーネントのすべての VNode とそのサブ VNode が更新された後に呼び出されます。

unbind: 命令が要素からバインドされていないときに、1 回だけ呼び出されます。

その他の JavaScript 関連の技術記事については、

js チュートリアル 列にアクセスして学習してください。

以上がvueカスタムディレクティブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。