【Vue.js】②[v-on]から処理の基本的な構造を知る（Vue.jsから始めるJavaScriptフレームワーク）

はじめに

【Vue.js】を知るうえで、[v-on][v-if][v-for]などいろいろ紹介するべきことがあります。

セオリー通りにいけば、最初は[v-if]なのですが、代わり映えしないでつまらないので後回し。

今回は、[v-on]を紹介いたします。

今回は、以前作成した「デラックスな軍艦巻き」を作るアプリケーションで学んでいきます。

【vue.js】デラックスな軍艦巻きを作成する。

【コード】

//処理部分
<script>
        var netas   = ['いくら', '大トロ', 'キングサーモン', 'キャビア', 'ウニ', 'あわび', 'アボカド', 'とびっこ', '白子', '軍艦'];
        var random  = 0;
        new Vue({
            el: "#app",
            data: {
                shari: [],
                netaName: ""
            },
            methods: {
                addItem() {
                    var random = Math.floor(Math.random() * netas.length);
                    this.shari.push(this.netaName);
                    this.netaName = netas[random];
                }
            }
        })
</script>

まず、基本構造ですが ↓

        new Vue({
            el: "#app",//お決まり
            data: {
                //ここで変数宣言
            },
            methods: {
                //ここに処理を記述
                }
            }
        })

はじめはだいたいこの構造になります。

この処理を行う上で、とりあえず今回は用語解説を行いたいと思います。