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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

php中世界最好的语言

Mar 07, 2018 am 11:50 AM

javascriptvue.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中文网其它相关文章！

相关阅读：

怎样在Android开发中与js进行交互

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

用Video.js实现H5直播界面

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

声明

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

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

See all articles