Vueマスターになりたい！、いやなってみせる！！

はじめに

2017年から今年にかけて、Vueをよく使うと聞きます。実際、「JavaScript ベスト・オブ・ザ・イヤー 2017」のフロントエンドフレームワーク編でも圧倒的な人気があります（記事は古いですが）。いや自分はVueの開発現場に携わってはいません（ゴリゴリのJavaScriptファイターです）。なんだかんだ３ヶ月くらいVueを触って来たのでそのまとめでもしようと思いまして投稿します！

Level 1（Vueを全く知らない編）

さて、全く知らない僕はどんな感じで手をつけたかというと、公式サイトのドキュメントからはじめました。環境構築的なやつはせずに最初はCDNでvue.js読み込んでやってみた！的なノリでやりました。

• Vue.js公式サイト
  • 学んだこと
    • データバインディング（リアクティブデータとかいうやつ）
    • v-if,v-showの違い、v-for(v-◯◯系)
    • イベントの利用（methods関連）
    • フォームの同期(v-model),修飾子（.lazy,.number,.sync）
    • トランジション&アニメーション

結局は、「Vue.js公式サイト」の「はじめに」を片っ端から攻めていった。感想というかコピペがほとんどなので「これがVue.jsか！」で終わった。とりあえずtransitionタグには感動した。

transition.vue

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Vue専用のCSSスタイリングもあって、勉強になりました。

Level2(本を買ってみた編)

結論から言うと本を買ってよかった！（まあ、１冊だけなんですが）
基礎から学ぶ Vue.jsを買ってみました。ねこちゃんが可愛かったから買ったということもある。Level1でやったことの復習にもなったし、VuexやVue-Routerとかいう新種の技も習得できたし、、（できるとはいってない）

• Vuex
  • 状態管理（state,mutations,action）
    • $emitやpropsで状態の受け渡しができることを知ったが、こっちの方が楽そう便利そうそうしよう
    • 複数のコンポーネントでデータを共有
    • データの状態に関する処理を共通化
• Vue router
  • SPAを構築するための拡張ライブラリ
    • router-link,router-viewによってSPAができるし、アニメーションをつけたりできる

多分一番買ってよかったなあと思うのは「Vueのライフサイクルダイアグラム」。アルゴリズム的な流れが図解できていてわかりやすかった。new Vue()でVueのインスタンスを生成しいろんなライフサイクルを経て$el をコンパイルしたり等、、、わかりやすかったです。

次回はコードを踏まえてまとめていきます。