この記事では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（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する