[Vue.js]ディレクティブとは

  • ブックマーク
  • -
    コピー

この記事はUdemyの講座「Vue JS入門決定版!jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。

今回はディレクティブというものを学習していきます。

ディレクティブとは

ディレクティブとは一体何なのか。

「ディレクティブ」とは

v- で始まる特別な属性のこと。directive(指令)という名前通り、Vue.jsに何からの指示を行う仕組み。

代表的なディレクティブにはこのようなものがあるらしい。

  • v-bind
  • v-if
  • v-show
  • v-for
  • v-on
  • v-model
公式サイトでの解説はこちら

属性のデータバインディング v-bind

例題が出ました。

  • テキスト入力の入力欄に”Helo Vue.js”と表示
  • 補足:dataオプションに指定したデータをデータバインディングする

とのこと。こちらを作っていくということらしいです。

HTML側にinputを作成

HTML側にinput部分を作成。最初はこんな感じで。

<div id="app">
  <input type="text">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript側にデータを持たせる

JavaScript側にデータを用意しましょう。

var app = new Vue({
	el: '#app',
  data: {
  	message: 'Hello Vue.js!'
  }
})

inputのvalue属性を設定

こうですね。

<input type="text" value="">

ここで今までの流れでマスタッシュ構文({{ mustache }})で書きたくなりますが、valueの値にそのままマスタッシュ構文を入れても、そのまま表示されてしまいます。

属性にマスタッシュ構文は使用することができません

マスタッシュ構文はテキストコンテンツのために記法のため、属性に使用することはできない。

属性へのデータバインディングにはv-bindを利用します。

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

こうすることによって、属性にデータを渡すことができます。公式のリファレンスはこちらになります。

次回以降、他のディレクティブの学習も進められるようです。楽しいですね!

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

ホームページのお話しませんか?

気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?

  • ブックマーク
  • -
    コピー

この記事を書いた人

久野 晃司

岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Gifu WordPress Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。