Vue.JS でカスタムディレクティブを使用する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue.JS でカスタムディレクティブを使用する方法

php中世界最好的语言

Mar 07, 2018 am 11:50 AM

javascript vue.js カスタマイズ

今回は、Vue.JSのカスタム命令の使い方と、Vue.JSのカスタム命令を使用する際の注意点を紹介します。実際の事例を見てみましょう。

Vue.js を使用すると、カスタムディレクティブを登録できます。これにより、基本的に、データの変更を DOM の動作にマッピングする方法など、新しいスキルを Vue に教えることができます。 Vue.directive(id, Definition) メソッドを使用して、ディレクティブ ID と定義オブジェクトを渡すことでグローバルカスタムディレクティブを登録できます。オブジェクトを定義するには、いくつかのフック関数 (すべてオプション) を提供する必要があります:

bind: 命令が初めて要素をバインドするときに 1 回だけ呼び出されます。

更新: バインド直後に初めて呼び出されるとき、取得されるパラメータはバインディングの初期値です。今後はバインド値が変更されるたびに呼び出され、新しい値と古い値の 2 つのパラメータが取得されます。、が得られます。

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

例:

Vue.directive(&#39;my-directive&#39;, {  bind: function () {    // 做绑定的准备工作
    // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
  },  update: function (newValue, oldValue) {    // 根据获得的新值执行对应的更新
    // 对于初始值也会被调用一次
  },  unbind: function () {    // 做清理工作
    // 比如移除在 bind() 中添加的事件监听器
  }
})

ログイン後にコピー

カスタムディレクティブが登録されたら、次のように Vue.js テンプレートで使用できます (Vue.js ディレクティブプレフィックスを追加する必要があります。デフォルトは v-):

<div v-my-directive="someValue"></div>

ログイン後にコピー

場合更新関数が必要な場合のみ、定義オブジェクトの代わりに関数を渡すことができます:

Vue.directive(&#39;my-directive&#39;, function (value) {  // 这个函数会被作为 update() 函数使用})

ログイン後にコピー

すべてのフック関数は実際のコマンドオブジェクトにコピーされ、このコマンドオブジェクトはすべてのフック関数の this
コンテキストになります。いくつかの便利なパブリックプロパティがディレクティブオブジェクトで公開されています:

el: ディレクティブがバインドされている要素
vm: ディレクティブを所有するコンテキスト ViewModel
expression: パラメーターとフィルターを除く、ディレクティブの式
arg: コマンドのパラメーター
raw: 解析されていない生の式
name: プレフィックスのないコマンド名

これらのプロパティは読み取り専用であり、変更しないでください。カスタムプロパティをディレクティブオブジェクトにアタッチすることもできますが、既存の内部プロパティを上書きしないように注意してください。

ディレクティブオブジェクト属性の使用例:

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
    Vue.directive(&#39;demoDirective&#39;, {
        bind: function () {            this.el.style.color = &#39;#fff&#39;
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {            this.el.innerHTML =                    &#39;name - &#39;       + this.name + &#39;<br>&#39; +                    &#39;raw - &#39;        + this.raw + &#39;<br>&#39; +                    &#39;expression - &#39; + this.expression + &#39;<br>&#39; +                    &#39;argument - &#39;   + this.arg + &#39;<br>&#39; +                    &#39;value - &#39;      + value
        }
    });    var demo = new Vue({
        el: &#39;#demo&#39;,
        data: {
            msg: &#39;hello!&#39;
        }
    })</script></body></html>

ログイン後にコピー

複数の句

同じ機能内で、カンマで区切られた複数の句が複数のディレクティブインスタンスとしてバインドされます。次の例では、命令が作成され、2 回呼び出されます:

<div v-demo="color: &#39;white&#39;, text: &#39;hello!&#39;"></div>

ログイン後にコピー

単一の命令インスタンスを使用して複数のパラメータを処理したい場合は、リテラルオブジェクトを式として使用できます:

<div v-demo="{color: &#39;white&#39;, text: &#39;hello!&#39;}"></div>
Vue.directive(&#39;demo&#39;, function (value) {  console.log(value) // Object {color: &#39;white&#39;, text: &#39;hello!&#39;}})

ログイン後にコピー

Literal命令

selfを作成する場合ディレクティブの定義時に isLiteral: true が渡された場合、属性値は直接文字列として扱われ、ディレクティブの式に割り当てられます。リテラル命令はデータ監視を確立しようとするものではありません。
例:

<div v-literal-dir="foo"></div>
Vue.directive(&#39;literal-dir&#39;, {  isLiteral: true,  bind: function () {    console.log(this.expression) // &#39;foo&#39;
  }
})

ログイン後にコピー

動的リテラルディレクティブ

ただし、リテラルディレクティブにMustacheタグが含まれている場合、ディレクティブは次のように動作します:

ディレクティブインスタンスには属性があり、this._isDynamicLiteralがtrueに設定されます。 update 関数が提供されていない場合、Mustache 式は 1 回だけ評価され、値は this.expression に割り当てられます。式に対してデータ監視は実行されません。

update 関数が提供されている場合、命令は式のデータ監視を確立し、計算結果が変化したときに update を呼び出します。

双方向ディレクティブ

ディレクティブが Vue インスタンスにデータを書き戻す場合は、 twoWay: true を渡す必要があります。このオプションにより、ディレクティブで this.set(value) を使用できるようになります。

Vue.directive(&#39;example&#39;, {  twoWay: true,  bind: function () {    this.handler = function () {      // 把数据写回 vm
      // 如果指令这样绑定 v-example="a.b.c",
      // 这里将会给 `vm.a.b.c` 赋值
      this.set(this.el.value)
    }.bind(this)    this.el.addEventListener(&#39;input&#39;, this.handler)
  },  unbind: function () {    this.el.removeEventListener(&#39;input&#39;, this.handler)
  }
})

ログイン後にコピー

インラインステートメント

acceptStatement: true を渡すと、カスタムディレクティブが v-on: のようなインラインステートメントを受け入れることができます:

<div v-my-directive="a++"></div>
Vue.directive(&#39;my-directive&#39;, {  acceptStatement: true,  update: function (fn) {    // the passed in value is a function which when called,
    // will execute the "a++" statement in the owner vm&#39;s
    // scope.
  }
})

ログイン後にコピー

ただし、一般にテンプレートでの副作用を回避したいため、この機能は賢明に使用してください。

詳細なデータ監視

オブジェクトに対してカスタム命令を使用する場合、オブジェクト内のネストされたプロパティが変更されたときに命令の更新関数をトリガーできる場合は、命令の定義を深く渡す必要があります。：真実。

<div v-my-directive="obj"></div>
Vue.directive(&#39;my-directive&#39;, {  deep: true,  update: function (obj) {    // 当 obj 内部嵌套的属性变化时也会调用此函数
  }
})

ログイン後にコピー

コマンドの優先順位

コマンドの優先順位番号を指定することを選択できます (デフォルトは 0)。同じ要素に対する優先度の高い命令は、他の命令よりも早く処理されます。同じ優先度を持つ命令は、要素属性リストに表示される順序で処理されますが、この順序が異なるブラウザーで一貫していることは保証されません。

一般的に、ユーザーは組み込み命令の優先順位を気にする必要はありません。興味があればソースコードを参照してください。論理制御命令 v-repeat および v-if は「端末命令」とみなされ、コンパイルプロセス中に常に最高の優先順位を持ちます。

要素ディレクティブ

場合によっては、ディレクティブを機能としてではなくカスタム要素として利用できるようにしたい場合があります。これは、Angular の E タイプディレクティブの概念に非常に似ています。要素ディレクティブは、軽量の自己定義コンポーネントとみなすことができます (後で説明します)。次のようなカスタム要素コマンドを登録できます:

Vue.elementDirective(&#39;my-directive&#39;, {  // 和普通指令的 API 一致
  bind: function () {    // 对 this.el 进行操作...
  }
})

ログイン後にコピー

これを使用するときは、次のように記述することはなくなりました:

<div v-my-directive></div>

ログイン後にコピー

代わりに、次のように記述します:

<my-directive></my-directive>

ログイン後にコピー

元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7562

CakePHP チュートリアル

1384

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Netflix でカスタムアバターをすばやくセットアップする方法 Feb 19, 2024 pm 06:33 PM

Netflix のアバターは、ストリーミング ID を視覚的に表現したものです。ユーザーはデフォルトのアバターを超えて自分の個性を表現できます。 Netflix アプリでカスタムプロフィール写真を設定する方法については、この記事を読み続けてください。 Netflix でカスタムアバターをすばやく設定する方法 Netflix には、プロフィール写真を設定する機能が組み込まれていません。ただし、ブラウザに Netflix 拡張機能をインストールすることでこれを行うことができます。まず、Netflix 拡張機能のカスタムプロフィール画像をブラウザにインストールします。 Chrome ストアで購入できます。拡張機能をインストールした後、ブラウザで Netflix を開き、アカウントにログインします。右上隅にあるプロフィールに移動し、をクリックします

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

Eclipseでショートカットキー設定をカスタマイズする方法 Jan 28, 2024 am 10:01 AM

Eclipse でショートカットキーの設定をカスタマイズするにはどうすればよいですか?開発者にとって、ショートカットキーをマスターすることは、Eclipse でコーディングする際の効率を向上させるための鍵の 1 つです。強力な統合開発環境として、Eclipse は多くのデフォルトのショートカットキーを提供するだけでなく、ユーザーが独自の好みに応じてショートカットキーをカスタマイズすることもできます。この記事では、Eclipseでショートカットキーの設定をカスタマイズする方法と具体的なコード例を紹介します。 Eclipseを開くまず、Eclipseを開いて次のように入力します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

ediusカスタム画面レイアウトの操作手順 Mar 27, 2024 pm 06:50 PM

1. 下の図はediusのデフォルトの画面レイアウトです EDIUSのデフォルトのウィンドウレイアウトは横レイアウトのため、シングルモニタ環境では多くのウィンドウが重なってプレビューウィンドウがシングルウィンドウモードになります。 2. メニューバーの[表示]から[デュアルウィンドウモード]を有効にすると、プレビューウィンドウに再生ウィンドウと録音ウィンドウを同時に表示できます。 3. [表示メニューバー > ウィンドウレイアウト > 一般] でデフォルトの画面レイアウトに戻すことができます。また、ウィンドウをドラッグして好みのレイアウトにし、[表示 > ウィンドウレイアウト > 現在のレイアウトを保存 > 新規作成] をクリックすると、自分に合ったレイアウトをカスタマイズして、よく使う画面レイアウトとして保存することもできます。ポップアップ [現在のレイアウトを保存] レイアウト] 小さなウィンドウにレイアウト名を入力し、OK をクリックします

ExcelでX軸とY軸をカスタマイズするにはどうすればよいですか? (Excelの軸スケールをカスタマイズする方法) Mar 14, 2024 pm 02:10 PM

Excel の表では、データの変化傾向をより直観的に確認するために座標軸を挿入する必要がある場合があります。表に座標軸を挿入する方法がまだ分からない友達もいると思いますが、次に Excel で座標軸のスケールをカスタマイズする方法を紹介します。座標軸の挿入方法: 1. Excel インターフェイスでデータを選択します。 2. 挿入インターフェイスで、クリックして縦棒グラフまたは棒グラフを挿入します。 3. 展開されたインターフェースで、グラフィックのタイプを選択します。 4. テーブルを右クリックして表示されるインターフェイスで、[データの選択] をクリックします。 5. 拡張されたインターフェイスで、カスタマイズできます。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

See all articles

Vue.JS でカスタム ディレクティブを使用する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Vue.JS でカスタムディレクティブを使用する方法