Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Vuejs】ディレクティブを解説(チートシート風)

vue.js

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211218162349j:plain

おはようございます。Shotaです。本記事を読んでいる人の中には、

🤨「Vuejsでのディレクティブが少しわからない....」

😥「Vuejsのディレクティブに関する説明記事があれば....」

このように考えている方も少なくないでしょう。

今回の記事では、Vuejsのディレクティブについて詳細に解説します。

Vuejsを使い慣れている人にはもうおなじみでしょうが、Vuejsのディレクティブは非常に良くできており、シンプルな構造をしているので理解しやすいと思います。

それでは早速、本題に入りましょう。



v-for

v-forはJavaScriptでおなじみのforの、Vuejs版になります。テンプレート内で繰り返し構文を使いたい場合には、配列に基づいてオブジェクトや配列をリスト表示させるためにv-forディレクティブを活用します。

v-forはvalue in valuesのような形式で書きます。(わかりやすく言えば「変数 in リスト」の形)Vuejsでは、v-forを使って反復処理できます。

▼HTMLファイル

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="main.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="app">
        <ul>
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>

        <br>

        <ul>
            <li v-for="val in object">
                {{ val }}
            </li>
        </ul>
    </div>

</body>
</html>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            items: [
                { message: 'One' },
                { message: 'Two' },
            ],
            object: {
                title: 'How to do list in vue',
                author: 'Nameless',
                created_at: '2021-12-20',
            }
        }
    },
}).mount('#app')

上記の例ではitemしかセットされていませんが、(item, index) in itemsのように第二引数を用いてインデックス(いわゆる数字)をもたせられるようになります。また、同時に:key属性(v-bind属性, 詳細は後述)をもたせるようにしましょう。これがないとVuejs内で予期せぬバグを起こす可能性があります。

あと、v-forは構文の曖昧さを避けるために、同じエレメント内でv-ifディレクティブを記述できないのでご注意を。


v-on

v-onディレクティブは主に、マウス動作時などイベント発生時のJavaScriptの実行を関連付けられます。@と省略されて使われます。

▼HTMLファイル

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="main.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="app">
        <button @click="count += 1">Add 1</button>
        <p>Clicked {{ count }} times.</p>
    </div>

</body>
</html>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            count: 0
        }
    },
}).mount('#app')

上記はクリックするとクリックした回数を表示するだけの簡単なWEBアプリです。

多くのイベント発生のロジックはより複雑になっていくので、v-on属性の値にJavaScript式を記述するのは現実的ではありません。そのため、v-onは呼び出したいメソッドの名前、インラインJavaScript式のメソッド指定も受け付けます。

▼HTMLファイル

<div id="app">
        <button @click="countUp">Add 1</button>
        <button @click="countDown(-1)">Remove 1</button>
        <p>Count: {{ count }}</p>
</div>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            count: 0
        }
    },
    methods: {
        countUp: function() {
            this.count += 1
        },
        countDown: function(num) {
            this.counter -= num
        }
    },
}).mount('#app')


v-model

双方向からデータを紐付ける(データバインディング)場合は、v-modelディレクティブを使用します。

例えば、formのinput要素、textarea要素やselect要素に多用されます。しかし、value, checkedやselected属性の初期値は無視されるので注意が必要です。

▼HTMLファイル

<input type="text" v-model="message" placeholder="edit me">
<p>{{ message }}</p>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Vue'
        }
    }
}).mount('#app')

上記のプログラムでは、input属性で指定した入力フォーム内に「Hello Vue」が表示されます。


v-if, v-else-if, v-else

v-ifディレクティブは、ブロックを条件に応じて表示したい時に使用されます。ブロックは、ディレクティブの四季が真の値を返す時に使用されます。

v-else-ifとv-else要素は、それぞれv-if要素あるいはv-else-if要素の直後に書く必要があります。

templateタグでグルーピング化し、v-ifと併用することでより複雑な条件式を作れます。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A or B</div>


v-once

一度目だけ変数が変更した場合に更新を行うことで、一度だけ展開できます。2回目以降は変数が変更しても更新されないので十分に注意してください。

<span v-once>This will never change: {{ message }}</span>


v-html

二重中括弧のmustaches({{}})は、データをHTMLではなくプレーンなテキストとして扱います。

そのため、実際のHTMLとして出力するにはv-htmlディレクティブを使用する必要があります。

▼HTMLファイル

<div id="app">
    <p>Using html: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            rawHtml: '<span style="color: red;">RED</span>'
        }
    }
}).mount('#app')


v-bind

v-bindディレクティブはv-modelとは異なって単一方向のデータバインディングになります。:と省略されて使われることが多いです。

より具体的に言うと、dataやmethodsで更新されたデータをDOMに反映するのみで、inputタグのようにDOM側で値が変更されてもdata, methodsで用いられる変数は変更されません。

▼HTMLファイル

<div id="app">
    <a :href="url">SAMPLE</a>
</div>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            url: 'https://sample.com/'
        }
    }
}).mount('#app')


まとめ

今回の記事では、非常に簡潔ではありますがチートシートのような感じでVuejsのディレクティブを徹底解説しました。

今回の記事を参考に、Vuejsのディレクティブについて理解を深めていただければ幸いです。

今回の記事はこれで以上です。