vueカスタムディレクティブ-jsチュートリアル-php.cn

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

(*-*)浩

リリース： 2019-06-18 15:31:16

オリジナル

8121 人が閲覧しました

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

ログイン後にコピー

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

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

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

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

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

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

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

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

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