ホームページ > 記事 > ウェブフロントエンド > Vueでカスタムディレクティブを開発する方法
この記事では主に vue カスタム命令ディレクティブの関連情報を紹介します。必要な方は参考にしてください。
以下は vue カスタム命令ディレクティブの概要です。内容は次のとおりです:
公式 Web サイトのスクリーンショットの例
いくつかのコア内部定義命令 (v-model,v-if,v-for,v-show
) に加えて、vue ではユーザーが独自の関数命令の一部を登録することもできます。現時点ではカスタム命令が最適です。
例を直接見てみましょう: ページが読み込まれると、要素がフォーカスを取得します (オートフォーカスは Safari のモバイル バージョンではサポートされていません)。つまり、ページが読み込まれると、何も操作せずにフォームが自動的にフォーカスを取得します。フォーム上のコードは次のとおりです:
Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`,在main.js文件里 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用 el.focus() // 聚焦元素 } })
ローカル ディレクティブを登録したい場合、コンポーネントはディレクティブ オプションも受け入れます:
<script> export default { directives: { // 指令的定义 zsqfocus: { inserted: function (el) { // 获得焦点 el.focus() } } } } </script>
その後、任意のコンポーネントで新しい v-zsqfocus 属性を使用できます。テンプレートは次のとおりです:
<template> <input v-zsqfocus /> //调用 </template>
例は公式 Web サイトと同じです。ディレクティブ、メソッド、マウントなどは同じレベルにあり、同時に使用できます。
PS: vue のカスタム命令ディレクティブのサンプル コードを見てみましょう。具体的なコードは次のとおりです。
<template> <p> <input v-model="dir1" v-my-directive1="dir1"/> <input v-model="dir2" v-my-directive2="dir2"/> </p> </template> <script> export default { data(){ return { dir1:'', dir2:'' } }, directives:{ //直接绑定函数,作用等同于update,不做准备工作和扫尾工作 myDirective1(val){ console.log(val) }, myDirective2:{ bind(){ //第一次绑定到元素的准备工作 }, update(val,old){ //在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update console.log(val) }, unbind(){ //销毁前的清理工作 } } } } </script>
上記は、すべての人にとって役立つことを願っています。未来。
関連記事:
vueでインデックスファイルをコンパイル、パッケージ化、表示する方法
webpackが127.0.0.1にアクセスできない問題を解決する
webpack-dev-serverにリモートアクセス設定メソッドを実装する
以上がVueでカスタムディレクティブを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。