「Vue.js」の「ディレクティブ」の使い方
「Vue.js」の学習も進んできて、「プログラムの記述方法が特殊」だと感じ始めてきました。
「pure javascript」に慣れるとなかなか「新しい記述方法に馴染めない」という側面もあったりします。
でも、学習量もまだまだ足りていないのでこれからもどんどん「Vue.js」の学習をしていきたいと思います。
ディレクティブ
「HTML要素」に埋め込む形で利用していく「ディレクティブ」ですが、「dataに基づいた属性値を設定する」ことや「条件分岐・繰り返し」などをビューで行うことができます。
v-bind
「HTML」に「属性」を設定できるディレクティブが「v-bind」です。
例えば、
<div id="app">
<button v-bind:disabled="buttonStatus">ボタン</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
buttonStatus: true
}
})
</script>
のように作成すると、「data」の「buttonStatus」が「true」の時に「disabled属性」が有効化され、「false」の時は「disabled属性」が無効になります。
「処理の状況」によって「ボタンを押せないようにしたい」といったシーンで活用できそうですね。
このボタン要素は
<button disabled="disabled">ボタン</button>
のように出力されます。
このプログラムを実行すると、
→「Vue.jsプログラムの実行（v-bind:disabled）」
のようになります。
他にも「data」で定義した値を「属性値」に設定することもできます。
例えば、
<div id="app">
<p v-bind:class="elmPclass">テキスト</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
elmPclass: "text"
}
})
</script>
のように作成すると、
<p class="text">テキスト</p>
のように表示されます。
このプログラムを実行すると、
→「Vue.jsプログラムの実行（v-bind:class）」
のようになります。
「data」で定義した「elmPclass」の内容が「クラス名」に出力されていますね。
v-if
「HTML要素」のレンダリングの要否を「if文」で切り替えられるディレクティブが「v-if」です。
下記のようなプログラムを作成してみました。
<div id="app">
<p v-if="loggedIn">ログインしています。</p>
<p v-else>ログインしてください。</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
loggedIn: true
}
})
</script>
「v-if」の条件を見ると「loggedIn」が「true」の場合は、「ログインしています。」の「p要素」を表示します。
「v-else」は「loggedIn」が「false」の場合に「ログインしてください。」の「p要素」を表示します。
このように「loggedIn」の値によって「レンダリングの要否」を切り替えることができます。
このプログラムを実行すると、
→「Vue.jsプログラムの実行（v-if,v-else）」
のようになります。
「数値」などの範囲によって切り替えることもできます。
<div id="app">
<input type="number" v-model="speed">
<p v-if="speed <= 0">アクセルペダルを踏んでください</p>
<p v-else-if="0 < speed && speed < 20">現在の速度を維持してください。</p>
<p v-else>ブレーキペダルを踏んでください</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
speed: 0
}
})
</script>
このプログラムでは、「data」の「speed」の値によって表示する要素を切り替えることができます。
「speed」は「v-model」で「input要素」と対応しているため、「input要素」の値を変化させると、その範囲によって表示する「HTML要素」が変化します。
このプログラムを実行すると、
→「Vue.jsプログラムの実行（v-if,v-else-if,v-else）」
のようになります。
v-show
「HTML要素」の「表示」と「非表示」を「CSSのdispayプロパティ」で切り替えることができるディレクティブが「v-show」です。
プログラムを作成してみると、
<div id="app">
<input type="number" v-model="speed">
<p v-show="speed <= 0">アクセルペダルを踏んでください</p>
<p v-show="0 < speed && speed < 20">現在の速度を維持してください。</p>
<p v-show="20 < speed">ブレーキペダルを踏んでください</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
speed: 0
}
})
</script>
のようになります。
プログラムの内容は「v-if」で作成したものと同じですが、ディレクティブを「v-if」から「v-show」に変更しています。
「v-if」は「DOMの追加と削除」で「HTML要素の表示」を切り替えていますが、「v-show」は「CSSのdisplayプロパティの値」を切り替えることによって「表示」と「非表示」を切り替えています。
このプログラムを実行すると、
のようになります。
v-for
「HTML要素の表示」に「繰り返し処理」を行うことができるディレクティブが「v-for」です。
プログラムを作成してみると、
<div id="app">
<ul>
<li v-for="item in Items" :key="item">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
Items: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5']
}
})
</script>
のようになります。
「data」の「Items」に「配列」データを定義しています。
内容を出力する際に「v-for」を利用していますが、「:key="item"」が何なのか気になりました。
これは「要素を識別するため」に必要のようです。
データを削除した際に「表示データずれ」が起きるなど、予期しない表示になることを防止する役割もあるそうです。
このプログラムを実行すると、
のようになります。
v-on
「クリック」や「キーダウン」などの「イベント」を検知して実行できるディレクティブが「v-on」です。
プログラムを作成してみると、
<div id="app">
<button v-on:click="displayAlert">アラートを表示</button>
</div>
<script>
let app = new Vue({
el: '#app',
methods: {
displayAlert: function () {
alert("ボタンがクリックされました。");
}
}
})
</script>
のようになります。
また、
<button v-on:click="displayAlert">アラートを表示</button>
の部分は、
<button @click="displayAlert">アラートを表示</button>
のように書き換えることもできます。
このプログラムを実行すると、
のようになります。
「ディレクティブ」は他にもありますが、そろそろ頭の容量がいっぱいになってきたので、今回はここまでにしたいと思います。
「Vue.js」は思っていたより学習量が多いため、まだまだ時間がかかりそうですが、少しずつ学んでいきたいと思います。