ホームページ バックエンド開発 PHPチュートリアル vue ディレクティブ ディレクティブ

vue ディレクティブ ディレクティブ

Dec 07, 2016 pm 04:48 PM

この記事では、Vue ディレクティブの使用方法を共有します。具体的な内容は次のとおりです

1. ディレクティブの登録

ディレクティブを使用するには、次の 2 つの方法があります。 1 つはグローバル登録です:

Vue.directive('dirName',function(){
 
  //定义指令
 
});
ログイン後にコピー


もう 1 つは部分登録です:

new Vue({
 
  directives:{
 
    dirName:{
 
      //定义指令
 
    }
 
  }
 
});
ログイン後にコピー


2. コマンドの定義

命令定義では、公式は使用する 5 つのフック関数を提供しており、それぞれが表すものです。コンポーネント

bind: の各ライフサイクルは、命令が初めて要素にバインドされるときに 1 回だけ呼び出されます。このフック関数を使用して、バインド時に 1 回実行される初期化アクションを定義できます。

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

update: バインディング値が変更されるかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されるときに呼び出されます。更新前後のバインディング値を比較することで、不要なテンプレートの更新を無視することができます(フック関数のパラメータの詳細については下記を参照)。

componentUpdated: バインドされた要素が配置されているテンプレートが更新サイクルを完了すると呼び出されます。

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

その他のテンプレートの更新 (更新) については、私の理解では、命令が配置されているテンプレートが変更され、再レンダリングが必要になる場合、たとえば、入力ボックスのモデルが変更される場合です。コマンドをトリガーします。もちろん、ここで述べられていることはかなり曖昧であり、詳細についてはまだ研究する必要があります。

このコードは update

<p id="app">
  <input type="text" v-focus="name" v-model="name" :data-name="name">
  <button type="button" @click="name=&#39;zw&#39;">click</button>
 
  <!--当点击按钮的时候name改变,继而触发update中的方法-->
</p>
<script>
 
  Vue.directive(&#39;focus&#39;,{
    bind: function(el, binding){
    console.log(&#39;bind:&#39;,binding.value);
  },
  inserted: function(el, binding){
    console.log(&#39;insert:&#39;,binding.value);
  },
  update: function(el, binding, vnode, oldVnode){
    el.focus();
    console.log(el.dataset.name);//这里的数据是可以动态绑定的
    console.table({
      name:binding.name,
      value:binding.value,
      oldValue:binding.oldValue,
      expression:binding.expression,
      arg:binding.arg,
      modifiers:binding.modifiers,
      vnode:vnode,
      oldVnode:oldVnode
    });
  },
  componentUpdated: function(el, binding){
    console.log(&#39;componentUpdated:&#39;,binding.name);
  }
});
new Vue({
  el:&#39;#app&#39;,
  data:{
    name:&#39;zwzhai&#39;
  }
});
</script>
ログイン後にコピー

の使用を実現できます


3. フック関数の定義

以下は公式によって提供されるいくつかのパラメータです:

el: 命令によってバインドされた要素を直接使用できますDOMを操作します。
binding: 次のプロパティを含むオブジェクト:
name: v- プレフィックスを除く命令名。
value: ディレクティブのバインディング値。例: v-my-directive="1 + 1"、value の値は 2 です。
oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。値が変更されているかどうかに関係なく使用できます。
式: バインディング値の文字列形式。 たとえば、 v-my-directive="1 + 1" の場合、expression の値は「1 + 1」です。
arg: コマンドに渡される引数。たとえば、v-my-directive:foo の場合、arg の値は「foo」です。
modifiers: モディファイアを含むオブジェクト。 例: v-my-directive.foo.bar、修飾子オブジェクト modifiers の値は { foo: true, bar: true } です。
vnode: Vue コンパイルによって生成された仮想ノード。詳細については、VNode API を確認してください。
oldVnode: 以前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。

これらのパラメーターはドキュメントを読めば誰でも理解できるので、bingding のいくつかの属性について私の見解を共有します (上記のように)。

vue 命令では双方向のデータ バインディングは許可されていません: el を除いて、他のパラメータは変更しないようにしてください。フック間でデータを共有する必要がある場合は、要素のデータセットを通じてそれを行うことをお勧めします。データセットに関する追加の知識は次のとおりです:

data- は HTML5 の新しい属性です。ブラウザーのサポート レベルを確認すると、IE の場合、現在の主流のブラウザーはすべて 10 以上である必要があります。具体的な使用法: HTML の属性として data-yourname="value" として記述します。js でこの属性を取得するには、getAttribute メソッドを使用する必要はありませんが、js の ele.dataset.yourname に直接アクセスします。また、追加と削除もできます。追加: ele.dataset.dessert="yourname"、削除: dette ele.dataset.name。さらに、この属性は CSS セレクターとして使用できます: .class[data-name]:{}。

上記は vue 命令ディレクティブの内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vueでechartを使用する方法 vueでechartを使用する方法 May 09, 2024 pm 04:24 PM

Vue で ECharts を使用すると、アプリケーションにデータ視覚化機能を簡単に追加できます。具体的な手順には、ECharts および Vue ECharts パッケージのインストール、ECharts の導入、チャート コンポーネントの作成、オプションの構成、チャート コンポーネントの使用、Vue データに対応したチャートの作成、対話型機能の追加、および高度な使用法の使用が含まれます。

vue におけるエクスポートのデフォルトの役割 vue におけるエクスポートのデフォルトの役割 May 09, 2024 pm 06:48 PM

質問: Vue におけるエクスポートのデフォルトの役割は何ですか?詳細説明: エクスポートデフォルトは、コンポーネントのデフォルトのエクスポートを定義します。インポートすると、コンポーネントが自動的にインポートされます。インポートプロセスを簡素化し、明確さを改善し、競合を防ぎます。一般に、名前付きエクスポートとデフォルト エクスポートの両方を使用して、個々のコンポーネントをエクスポートし、グローバル コンポーネントを登録するために使用されます。

vueでのmap関数の使い方 vueでのmap関数の使い方 May 09, 2024 pm 06:54 PM

Vue.js マップ関数は、各要素が元の配列の各要素の変換結果である新しい配列を作成する組み込みの高階関数です。構文は、map(callbackFn) です。callbackFn は、配列内の各要素を最初の引数として受け取り、オプションでインデックスを 2 番目の引数として受け取り、値を返します。 map 関数は元の配列を変更しません。

vueのeventと$eventの違い vueのeventと$eventの違い May 08, 2024 pm 04:42 PM

Vue.js では、event はブラウザによってトリガーされるネイティブ JavaScript イベントですが、$event は Vue コンポーネントで使用される Vue 固有の抽象イベント オブジェクトです。 $event はデータ バインディングをサポートするようにフォーマットおよび拡張されているため、一般に $event を使用する方が便利です。ネイティブ イベント オブジェクトの特定の機能にアクセスする必要がある場合は、event を使用します。

vueのエクスポートとデフォルトのエクスポートの違い vueのエクスポートとデフォルトのエクスポートの違い May 08, 2024 pm 05:27 PM

Vue.js でモジュールをエクスポートするには、エクスポートとデフォルトのエクスポートの 2 つの方法があります。 export は名前付きエンティティのエクスポートに使用され、中括弧の使用が必要です。export default はデフォルト エンティティのエクスポートに使用され、中括弧は必要ありません。インポートする場合、エクスポートによってエクスポートされたエンティティはその名前を使用する必要がありますが、エクスポートのデフォルトによってエクスポートされたエンティティは暗黙的に使用できます。複数回インポートする必要があるモジュールにはデフォルトのエクスポートを使用し、一度だけエクスポートするモジュールにはエクスポートを使用することをお勧めします。

Vue における onmounted の役割 Vue における onmounted の役割 May 09, 2024 pm 02:51 PM

onMounted は、Vue のコンポーネント マウント ライフ サイクル フックです。その機能は、コンポーネントが DOM にマウントされた後に、DOM 要素への参照の取得、データの設定、HTTP リクエストの送信、イベント リスナーの登録などの初期化操作を実行することです。コンポーネントが更新された後、またはコンポーネントが破棄される前に操作を実行する必要がある場合は、他のライフサイクル フックを使用できます。

Vueのフックとは何ですか Vueのフックとは何ですか May 09, 2024 pm 06:33 PM

Vue フックは、特定のイベントまたはライフサイクル ステージでアクションを実行するコールバック関数です。これらには、ライフサイクル フック (beforeCreate、mounted、beforeDestroy など)、イベント処理フック (クリック、入力、キーダウンなど)、およびカスタム フックが含まれます。フックはコンポーネントの制御を強化し、コンポーネントのライフサイクルに対応し、ユーザーの操作を処理し、コンポーネントの再利用性を向上させます。フックを使用するには、フック関数を定義し、ロジックを実行してオプションの値を返すだけです。

vue のイベント修飾子はどのようなシナリオに使用できますか? vue のイベント修飾子はどのようなシナリオに使用できますか? May 09, 2024 pm 02:33 PM

Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。 デフォルト動作の防止 (.prevent) イベント バブリングの停止 (.stop) ワンタイム イベント (.once) イベントのキャプチャ (.capture) パッシブ イベント リスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)

See all articles