はじめてのVue.js

概要

• 公式のGET STARTEDを参考に、やりたいことベースでどうコードに落とし込むかまとめてみました
• 自分の興味や必要になったものを随時追加していきます
• 実際の動作を確認されたい場合はこちらをご覧ください🙇‍♂️

1. 基本の基

<div id="app_1">
    {{ message }}
</div>

<script>
    var app_1 = new Vue({
        el: '#app_1',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            hello: function() {
                console.log('Hello Vue!');
            }
        }
    });
</script>

• Vueオブジェクトを利用する
• elフィールドでレンダリングの対象DOMを指定
• dataフィールドでレンダリングするデータをkey: valueで定義する
• DOMの内部に{{key}}の形式で記述をするとdataないのkeyに該当するvalueがレンダリングされる
• 後述のイベント等で使用できる関数をmethodsフィールドで定義できる
• dataやmethodsの参照方法は以下の通り
  • 自分自身のdata： this.message
  • 自分自身のmethods: this.hello()
  • 外部からdata: app_1.message
  • 外部からmethods: app_1.hello()

2. 制御構文

2-1. 条件分岐

2-1-1. 単一エレメントの出し分け

<div id="app_2_1_1">
    <p v-if="condition">Condition: true</p>
    <p v-else="condition">Condition: false</p>
</div>

<script>
    var app_2_1_1 = new Vue({
        el: '#app_2_1_1',
        data: {
            condition: true
        }
    });
</script>

• v-ifを用いる
• 属性には真偽値になるような値や条件式を設定する
• v-elseを用いるとelse構文と同じ働きをしてくれる

2-1-2. 複数エレメントの出し分け

<div id="app_2_1_2">
    <template v-if="condition">
        <p>multiple element</p>
        <p>multiple element</p>
    </template>
</div>

<script>
    var app_2_1_2 = new Vue({
        el: '#app_2_1_2',
        data: {
            condition: true
        }
    });
</script>

• 単位エレメントとの違いは、出し分けるエレメントを<template>タグで囲うこと

2-1-3. 文字列比較

<div id="app_2_1_3">
    <p v-if="word === 'A'">The word is A</p>
    <p v-else>The word is not A</p>
</div>

<script>
    var app_2_1_3 = new Vue({
        el: '#app_2_1_3',
        data: {
            word: 'A'
        }
    });
</script>

• v-ifの中身は真偽値になれば良いので文字列比較もできる
• 文字列は'で囲うことを忘れずに

2-2. ループ

2-2-1. 配列

<div id="app_2_2_1">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>

    <ul>
        <li v-for="(item, index) in items">{{index}} - {{value}}</li>
    </ul>
</div>

<script>
    var app_2_2_1 = new Vue({
        el: '#app_2_2_1',
        data: {
            items: ['A', 'B', 'C']
        }
    });
</script>

• v-forを使用
• item in itemsでitemsから要素をひとつずつ取り出しitemに格納
• {{item}}と記述することでレンダリングされる
• 要素番号も取得したい場合は(item, index) in itemsと記述
  • itemが先なので注意

2-2-2. Map(連想配列)

<div id="app_2_2_2">
    <ul>
        <li v-for="value in items">{{value}}</li>
    </ul>

    <ul>
        <li v-for="(value, key) of items">{{key}} : {{value}}</li>
    </ul>
</div>

<script>
    var app_2_2_2 = new Vue({
        el: '#app_2_2_2',
        data: {
            items: {
                'A': 'Apple',
                'B': 'Banana',
                'C': 'Cat'
            }
        }
    });
</script>

• 配列と同じ使い方をした場合はkey: valueのうちvalueのみが取り出される
• keyも取得したい場合は(value, key) in itemsと記述
  • valueが先なので注意
• inとofはどちらでも良いっぽい
  • 公式ドキュメントでも基本inだけどJavascriptの構文に合わせるためにofも使えるよみたいな描かれ方をしている

2-2-3. 複数要素のループ

<div id="app_2_2_3">
    <table>
        <template v-for="(item, index) in items">
            <tr>
                <td>{{index}}</td>
                <td>{{item}}</td>
            </tr>
        </template>
    </table>
</div>

<script>
    var app_2_2_3 = new Vue({
        el: '#app_2_2_3',
        data: {
            items: ['A', 'B', 'C']
        }
    });
</script>

• ループさせるエレメントが複数になる場合は、v-if同様に<template>タグで囲う

3. ユーザー入力

3-1. 入力値をレンダリング

<div id="app_3_1">
    <input type="text" v-model="message">
    <p>The input message is {{message}}</p>
</div>

<script>
    var app_3_1 = new Vue({
        el: '#app_3_1',
        data: {
            message: "default"
        }
    });
</script>

4. イベント

4-1. click

<div id="app_4_1">
    <button v-on:click="method1">ボタン</button>
</div>

<script>
    var app_4_1 = new Vue({
        el: '#app_4_1',
        methods: {
            method1: function(event) {
                alert('Button was clicked');
            }
        }
    });
</script>