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

デラックスな軍艦巻きを作成するアプリ

【使い方】

１．「追加」ボタンをひたすら押します。

２．軍艦巻きが完成(‘ω’)

以上です。

仕事に疲れたら、このアプリを使って憂さ晴らしをされると良いと思います。

以下、作った際のメモ

業務では触れることがないので、土日でひたすら理解を深めるという日曜大工。

[vue.js]では何ができるの？

「jQuery」とは何が違うの？

とりあえず[vue.js]に関していろいろなサイト様を巡回していると「便利」ということはわかるのですが、初心者には何がうれしいのかよくわからん(‘ω’)という具合にチンプンカンプンです。

とりあえず見つけた機能は、以前ご紹介させていただいた

【jQuery】テーブルに行を追加する方法

などで表記しているようなことをせずとも、[vue.js]ではタグを文字列に入れる必要なく、フレームワークが勝手に判別して代入してくれるという超絶便利な機能があります。

■テーブル行追加例

//■tr追加
var html;
$('#addjqTr').on('click', function(){
	
	html	= "";
	html	+= "<tr>";
	html	+= "<th>th</th>";
	html	+= "<td>td</td>";
	html	+= "<tr>";
				
	$('#tbody01').append(html);	
});

デラックスな軍艦巻きを作成するアプリの内部

html部分は下記の通り

    <div id="app">
        <input v-model="netaName" /><button @click="addItem">追加</button>
        <ul id="itemList">
            <span v-for="item in shari">{{ item }}</span>
        </ul>
    </div>

スクリプトタグは下記のようにします。

　　//■ひたすら豪華な軍艦巻きを作る。

    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];
            }
        }
    });

なお、作ってわかったのは「JavaScript」の基礎を勉強しなければならないということ。

機能は使えるのですが、どのような仕組みで文字列が結合されているのか一切わからない。

思えば、[.push]とか普段使っているのですが、使えているだけで満足していて特徴とか一切知らないです。