Vueの学習

📢 この記事は gemini-3-flash-preview によって翻訳されました

Vue ディレクティブ

Vueは、いろんなディレクティブを使って、タグごとに違う機能を実現するんだ。ディレクティブっていうのは v- プレフィックスがついた特別なタグ属性のことだよ。

v-html

要素の innerHTML を設定するために使うよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
        <meta charset="utf-8">
        <title>v-html</title>
    </head>
    <body>
        <div id="app">
            <div v-html="link"></div>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    link:'<a href="https://yexca.net/">yexca</a>'
                }
            })
        </script>
    </body>
</html>

v-show と v-if

\	v-show	v-if
役割	要素の表示・非表示を制御する	要素の表示・非表示を制御する (条件付きレンダリング)
文法	v-show=“式”	v-if=“式”
式の値	true で表示、false で非表示	true で表示、false で非表示
非表示の説明	属性 `style="display:none;"` で制御	要素を直接削除または作成する
シーン	切り替えが頻繁なとき	切り替えがあまり頻繁じゃないとき

v-else と v-else-if

v-if のレンダリングを補助するために使うよ。v-if のすぐ後ろに続けて書く必要があるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <meta charset="utf-8">
        <title>v-else and v-else-if</title>
    </head>
    <body>
        <div id="app">
            <p v-if="gender === 1">性別：男</p>
            <p v-else>性別：女</p>
            <hr />
            <p v-if="score >= 90">判定 A</p>
            <p v-else-if="score >= 70">判定 B</p>
            <p v-else-if="score >= 60">判定 C</p>
            <p v-else>判定 D</p>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    gender: 1,
                    score: 89
                }
            })
        </script>
    </body>
</html>

v-on

イベントを登録するために使うよ。「リスナーの追加 + 処理ロジックの提供」って感じだね。

文法1

v-on:イベント名=“インラインステートメント”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 1</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="count1--">-</button>
            <span>{{count1}} </span>
            <!-- v-on: は @ に省略できるよ -->
            <button @click="count1++">+</button>
            <hr />
            <button v-on:mouseenter="count2--">-</button>
            <span>{{count2}}</span>
            <button v-on:mouseenter="count2++">+</button>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    count1: 1,
                    count2: 2
                }
            })
        </script>
    </body>
</html>

文法2

v-on:イベント名=“methods内の関数名”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 2</title>
    </head>
    <body>
        <div id="app">
            <button @click="fun">表示・非表示を切り替え</button>
            <p v-show="isShow">hello yexca</p>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    isShow: true
                },
                methods: {
                    fun(){
                        // this は常に現在のインスタンスを指すよ
                        this.isShow = !this.isShow
                    }
                }
            })
        </script>
    </body>
</html>

引数の渡し方

さっそく例を見てみよう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
    <head>
        <meta charset="utf-8">
        <title>v-on 3</title>
        <style>
            .box{
                border-style: solid;
                border-color: aqua;
                padding: 10px;
                margin: 10px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="box">
                <h3>自動販売機</h3>
                <button @click="fun(5)">コーラ 5円</button>
                <button @click="fun(10)">コーヒー 10円</button>
            </div>
            <div style="padding-left: 20px;">残高：{{balance}}</div>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    balance: 900
                },
                methods: {
                    fun(a){
                        this.balance -= a
                    }
                }
            })
        </script>
    </body>
</html>

v-bind

HTMLタグの属性（src、url、title など）を動的に設定するために使うよ。

文法：v-bind:属性名=“式”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <meta charset="utf-8">
        <title>v-bind</title>
        <style>
            img{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- v-bind は省略できるよ -->
            <img v-bind:src="imgURL" :title="imgTitle" :alt="imgAlt" />
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    imgURL: '../img/01.jpg',
                    imgTitle: 'warma',
                    imgAlt: 'warma'
                }
            })
        </script>
    </body>
</html>

v-for

データに基づいてループして、要素全体を何度もレンダリングするよ。

文法：v-for="(item, index) in 配列"

item：各要素、index：インデックス

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for</title>
    </head>
    <body>
        <div id="app">
            <h3>フルーツショップ</h3>
            <ul>
                <!-- index が不要なときは省略できるよ -->
                <li v-for="item in list">{{ item }}</li>
            </ul>
            <ul>
                <li v-for="(item,index) in list">{{ index }}</li>
            </ul>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    list: ['apple', 'banana', 'watermelon']
                }
            })
        </script>
    </body>
</html>

Vueがリスト項目を正しく並べ替えたり再利用したりしやすくするために、要素に一意の識別子、つまり key 属性を付ける必要があるんだ。

keyの値は文字列か数値だけで、かつ一意じゃないといけないよ。

1
<li v-for="(item, index) in list" :key="item.id"></li>

key には id を使うのがおすすめ。index を key にするのは、データの順番が変わると index も変わっちゃうからおすすめしないよ。

v-model

フォーム要素に使って、双方向データバインディングを実現するよ。これでフォームの内容を素早く取得したり設定したりできるんだ。

双方向データバインディングっていうのは、見た目（ビュー）が変わればデータも自動で更新されるってこと。

文法：v-model=‘変数’

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            username: <input type="text" v-model="username"/><br /><br />
            password: <input type="password" v-model="password" /><br /><br />
            <button @click="login">ログイン</button>
            <button @click="reset">リセット</button>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    username: '',
                    password: ''
                },
                methods: {
                    login(){
                        console.log(this.username, this.password)
                    },
                    reset(){
                        this.username = ''
                        this.password = ''
                    }
                }
            })
        </script>
    </body>
</html>

ディレクティブ修飾子

. を使ってディレクティブに接尾辞を付けることで、特定の処理を簡単に実行できるよ。

キー修飾子

@keyup.enter エンターキーの入力を監視

v-model 修飾子

v-model.trim 前後の空白を削除

v-model.number 数値に変換

イベント修飾子

@イベント名.stop バブリングを阻止

@イベント名.prevent デフォルトの挙動を阻止

算出プロパティ (Computed)

すでにあるデータをもとに計算される新しいプロパティのこと。依存しているデータが変わると、自動で再計算されるよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
new Vue(){
    el: "#app",
    data: {
        count: 0,
    },
    computed: {
        doubleCount() {
            return this.count * 2;
        },
    },
}

Vue ライフサイクル

ライフサイクルっていうのは、オブジェクトが作成されてから破棄されるまでの一連の流れのこと。

Vue のライフサイクルには8つの段階があって、それぞれのタイミングでライフサイクルメソッド（フック）が自動で実行されるんだ。

状態	フェーズ/周期
beforeCreate	作成前
created	作成後
beforeMount	マウント前
mounted	マウント完了
beforeUpdate	更新前
updated	更新後
beforeDestroy	破棄前
destroyed	破棄後

その中でも mounted はよく使われるよ。Vue の初期化が成功して、HTML のレンダリングが完了した状態を指すんだ。（サーバーにデータをリクエストして読み込むときとかに使うね）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
new Vue(){
    el: "#app",
    data: {
        
    },
    mounted(){
        console.log("Vue のマウントが完了。データを取得するリクエストを送信するよ");
    },
    methods: {
        
    }
}