Vue.jsで簡単なアプリケーションを作るまでに学んだこと
はじめに
完全に個人用の備忘録として作りました。
udemyの「Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)」で学習した内容のメモになります。 内容としてはsection1~4まで。
背景
仕事の関係でVue.jsを使うので、「関わりたいなら最低限これやってねー！」と言われたのがudemyの「Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)」。
合計20時間超えの講義量を見て絶望しましたが、なんとかしないとアカン！ということで、せっせとアウトプットしていきます。
作ったもの~ドラゴンスレイヤー~
これが初期状態。
体力がplayer側もmonster側も100あります。
「START NEW GAME」で戦いのゴングが鳴ります！！
コマンドが出てきましたね。
ATTACKで攻撃してみます！
攻撃に成功しました！
playerが攻撃すると、必然的にmonster側のターンになり、monsterも攻撃してきます！
monster側の方が攻撃力は高いので、ATTACKを繰り返してみると。。
あちゃー。 負けました！！ alertで「You Lost！」って出てますね。
OKを押すとNew Gameになります。
今度はSPECIAK ATTACKを連発します。
10ダメージ与えているのでいい感じですね。
回復も使ってみます。
10回復するので、危ないときは回復優先で。
GIVE UPを押すと、また最初の状態の戻ります！
学んだ知識まとめ
v-on
DOMの購読やイベント発火時にJSの実行が可能。
v-on:@click =""でクリック時にJS実行。
本アプリでは省略版の
@clickをATTACKなどのコマンドで多用した。
v-if,v-else
条件分岐。
PHPでのif構文のように使えるので、理解は難しくない。
v-if(条件式){内容}
v-else{内容}
本アプリではゲーム中であれば、attackなどのコマンドを表示し、ゲーム中じゃなければ表示しない！という設定用に使った。
<section class="row controls" v-if="!gameIsRunning"> <div class="small-12 columns"> <button id="start-game" @click="startGame">START NEW GAME</button> </div> </section> <section class="row controls" v-else> <div class="small-12 columns"> <button id="attack" @click="attack">ATTACK</button> <button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button> <button id="heal" @click="heal">HEAL</button> <button id="give-up" @click="giveUp">GIVE UP</button> </div> </section>
v-for
v-forは配列に基づいて、アイテムのリストを表示する際に使う。
使い方としては
<li v-for="item in items">
{{ item.message }}
</li>としてitemsの中のmessageを配列として表示できる。
本アプリではコマンドの下のダメージなどの表示をv-forで作っています。 turnsという配列の中のtextをループ処理で取り出す事で、ターン毎の両者のダメージを描画しています。
<ul>
<li v-for="turn in turns"
:class="{'player-turn': turn.isPlayer, 'monster-turn': !turn.isPlayer}">
{{ turn.text }}
</li>
</ul>
まとめ
Vue.jsを勉強し始めて3日目。 勉強時間にして20時間ほどを費やしたと思います。
「インプット量が多すぎて処理できない！とりあえずまとめよう！！」的な考えで今回のQiitaを執筆するに至りましたが、実際にまとめてみると、そんなに多くも難しくもない量しかまだ触れていないことが分かりました。
udemyの講義自体はまだ全体の1/6なので、またインプットが溜まってきたらqiitaに吐き出します。
