プログラミングライフスタイル

「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要素」が変化します。

v-if

このプログラムを実行すると、

→「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プロパティの値」を切り替えることによって「表示」と「非表示」を切り替えています。

このプログラムを実行すると、

→「Vue.jsプログラムの実行(v-show)」

のようになります。

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"」が何なのか気になりました。

これは「要素を識別するため」に必要のようです。

データを削除した際に「表示データずれ」が起きるなど、予期しない表示になることを防止する役割もあるそうです。

このプログラムを実行すると、

→「Vue.jsプログラムの実行(v-for)」

のようになります。

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プログラムの実行(v-on)」

のようになります。

「ディレクティブ」は他にもありますが、そろそろ頭の容量がいっぱいになってきたので、今回はここまでにしたいと思います。

「Vue.js」は思っていたより学習量が多いため、まだまだ時間がかかりそうですが、少しずつ学んでいきたいと思います。

→(前へ)「methods」と「watch」について学ぶ

→(次へ)「ライフサイクルフック」の仕組みを学ぶ

HOMEへ