ディレクティブとは – Vue.js入門

この記事ではVue.jsのディレクティブとは、なにかについてプログラミング入門者向けに説明いたします。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

Vue.jsのディレクティブとは

ディレクティブとはv-で始まる特別な属性のことです。

ディレクティブは Vue.js によって提供された特別な属性を示すためにv- 接頭辞がついています

directive(日本語でいうと指令）という名前の通り、Vue.jsに何らかの指示を行う。仕組みです。

ディレクティブの例

Vue.jsには、多くのディレクティブがあるのですが、代表的なものとしては、下記のものがあります。

• v-bind
• v-if
• v-show
• v-for
• v-on
• v-model

使用例

例えば、このような形で使います。

<input type="text" v-bind:value="message"/>

v-bindの部分は、DOMへ反映される前に、Vue.jsによって解釈・変換されて、その後は内部的にのみ利用されます。

動画でVue.jsのディレクティブについて学習する

おわりに

この記事では、ディレクティブとは何かについて、学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する