この記事は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スキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
