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:&#39;&#39;,　　　　　　　　　dir2:&#39;&#39;
　　　　　　　}
  },
  directives:{　　　　　　　//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },　　　　　　　myDirective2:{　　　　　　　　　　bind(){　　　　　　　　　　　　　//第一次绑定到元素的准备工作　　　　　　　　　　},　　　　　　　　　　update(val，old){　　　　　　　　　　　　//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update　　　　　　　　　　　　console.log(val)　　　　　　　　　　},　　　　　　　　　　　　unbind(){　　　　　　　　　　　　//销毁前的清理工作　　　　　　　　　　}　　　　　　　}
  }
 }
</script>

上記は、すべての人にとって役立つことを願っています。未来。

関連記事:

vueで指によるスライドを実装する方法

vueでインデックスファイルをコンパイル、パッケージ化、表示する方法

vueでJadeテンプレートを使用する方法

Angular Passテンプレートコンポーネントへ

Node.jsでAsync関数とAwait関数を使用する

webpackが127.0.0.1にアクセスできない問題を解決する

webpack-dev-serverにリモートアクセス設定メソッドを実装する

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