ホームページ  >  記事  >  ウェブフロントエンド  >  Vueでカスタムディレクティブを開発する方法

Vueでカスタムディレクティブを開発する方法

亚连
亚连オリジナル
2018-06-11 16:32:142007ブラウズ

この記事では主に 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。