基礎的なVue.jsディレクティブについてのまとめ

#はじめに
Vue.js初学者の筆者がUdemyの講座 超Vue.js 2 完全パック と Vue.js公式ドキュメント を参考にし、理解を深めるためVue.jsのディレクティブについてまとめました。

##本記事で紹介するディレクティブ

• v-once
• v-html
• v-bind
• v-on
• v-model

その他のディレクティブについてはVue.js公式ドキュメント ディレクティブからご確認ください。

#ディレクティブとは
Vue.jsではv-から始まる属性のことをディレクティブと言います。

属性とは要素の何かしらの設定をつけるようなものです。
例えば、
<a href=""></a>
ではhrefが属性と言えます。

##v-once
他の関数の影響を受けず、要素やコンポーネントを一度だけ描画させることができます。
###例

v-once.html

<!-- bodyタグ内の記述 -->
<!-- Vue.js開発バージョン導入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <p v-once>number:{{number}}</p> 
    <!-- 関数実行 -->
    <p>関数実行:{{ changeNumber() }}</p>
    <p>number:{{number}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            number: 1
        },
        methods: {
            // numberを10に変え、'change'を返す関数
            changeNumber: function(){
                this.number = 10;
                return 'change';
            }
        }
    })
</script>

出力結果

number:1
関数実行:change
number:10

v-once属性があるため、1行目のnumberは10に上書きされずに描画されています。

##v-html
htmlタグを適応させることができます。
クロスサイトスクリプティングの危険があるため、ユーザーが提供するコンテンツには絶対に使わないようにする必要があります。
信頼のあるコンテンツのみに使用しなければなりません。

###例

v-html.html

<!-- bodyタグ内の記述 -->
<!-- Vue.js開発バージョン導入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <p v-html="fruits"></p> 
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            fruits: '<ul><li>りんご</li><li>みかん</li></ul>'
        }
    })
</script>

出力結果

• りんご
• みかん

##v-bind
引数をとるディレクティブです。属性に対してデータを使えるようになります。
引数にオブジェクトを取ることで、複数の属性を表すことができます。
また、属性を[ ]で囲むことで動的に属性を表現することもできます。。
v-bind:は:に省略することができます。省略するかしないかは統一することが望ましいです。

###例

v-bind.html

<!-- bodyタグ内の記述 -->
<!-- Vue.js開発バージョン導入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
　　<!-- 動的に属性値を表す -->
    <a v-bind:href="url">Vue.js公式ドキュメント</a>
    <br>
　　<!-- v-bind内をオブジェクトでまとめることもできる -->
    <a v-bind="object">Qiitaトップページ</a>
    <br>
    <!-- 動的に属性を表現するときは[]で囲む -->
    <a v-bind:[attribute]="url">Vue.js公式ドキュメント(動的に属性を表現)</a>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            url: 'https://v3.ja.vuejs.org/', // 例としてVue.jsの公式ドキュメントを使用
            object: {
                href: 'https://qiita.com/', // 例としてQiitaトップページ使用
                target: '_blank'
            },
            attribute: 'href'
        }
    })
</script>

出力結果

Vue.js公式ドキュメント
Qiitaトップページ
Vue.js公式ドキュメント

##v-on
DOMイベントが発生した瞬間に関数を実行したいときに使用します。
v-on:DOMイベント名 = "実行したい関数名"のように記入します。
このとき、関数に引数を取らない場合は関数名に()をつけてもつけなくてもよいです。
また、v-bindと同じようにDOMイベントを動的に表す場合は[ ]で囲みます。
v-onは@で省略することができます。こちらも省略するしないは統一することが望ましいです。

###例

v-on.html

<!-- bodyタグ内の記述 -->
<!-- Vue.js開発バージョン導入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
　　<!-- クリックした瞬間にアラート -->
    <button v-on:click="functionAlert()">クリック</button>
</div>
<script>
    new Vue({
        el: '#app',
        methods: {
            functionAlert() {
                alert('アラート！')
            }
        }
    })
</script>

##v-model
双方向データバインディングができる、つまり、Vueのテンプレートからデータを変えることができます。

###例

v-model.html

<!-- bodyタグ内の記述 -->
<!-- Vue.js開発バージョン導入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
　　<input type="text" v-model="message">
    <p>{{ message }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        }
    })
</script>

上記のコードの場合、inputタグ内で変更した内容がデータに反映されるため、、pタグ内のmessageも同様に変更されます。

#おまけ
##省略記法まとめ
本文中にも記載しましたが、以下に一覧を記載します。

属性名	省略後
v-bind	:
v-on	@