分かりすぎるVue.jsチートシート

#自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です (2020.9.29現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！!

#1...JSフレームワークについて

「Angular」,「React」,「Vue」この3個がJS人気フレームワークです。
今回はその中のVueについて詳しく話していきたいと思います

Vueの公式ドキュメント

#2...Vue.jsとは?

Vue.jsはユーザーインターフェースを構築するためのJavaScriptのフレームワークです。
最近ではReact、Angular、Vue.jsがJavaScriptの人気フレームワークとして定着してきています。
その中でもVue.jsは初心者に優しく比較的に学習しやすい事もあり現在の国内での人気は頭一つ抜けている印象があります。

##Vue.jsの特徴

・コンポーネントの再利用性が高い
・学習コストが低く、取っ付きやすい
・拡張性が高い

##3...Vue.jsで抑えとくべきポイント

###①Vuex
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。
※貯蔵庫的な役割と思っていいです。

詳しいのは公式=>https://vuex.vuejs.org/ja/

####Vuexの流れ(図解)

①componentでdispatchする
②actionsでAPIデータのやり取りする
③それをcommitしてmutationsを呼ぶ
④mutationsでデータの値変える
⑤するとstateの値が変わる

ざっくりした流れですが公式の補足程度で見てもらえると嬉しいです。

⭐️おすすめ
[初めてのアウトプット]
・爆速理解！超簡単Vuex入門①

---

###②基本的に使うオブジェクト構成

構造だけまとめているので詳しいことは公式で確認してください。

sample.js

ver vm = new Vue({
  el: 'app',
// ①使用するデータ
  data: {
    name: 'note',
    price: 500
  },
// ② 算出プロパティ
  computed: {
     isPrice: function () {
      return this.price / 2;
    }
  },
  // ③ 使用するメソッド
  methods: {
    isPrice: function() {
      return this.price / 2;
    }
  }
})

・※thisについての記事

data（使用するデータ）

sample.js

var vm = new Vue ({
  el: '#app',
  data: {  //data: { プロパティ名： 値 }
    name: 'note',
    price: 500
  }
})

samole.html

<div id="app">
  <p>{{ name }}</p>
</div>

####computed　（算出プロパティ）

sample.js

var vm = new Vue ({
  el: '#app',
  data: {
    name: 'note',
    price: 500
},

  computed: {
    // isPriceを定義
    isPrice: function () {
      return this.price / 2;
    }
  }
})

sample.html

<div id="app">
  <!-- 250が表示される -->
  <p>{{ isPrice }}円</p>
</div>

####methods（メソッド）

sample.js

var vm = new Vue ({
  el: '#app',
  data: {
    name: 'note',
    price: 500
},
  methods: {
    // メソッドisPriceを定義
    isPrice: function() {
      return this.price / 2;
    }
  }
})

sample.html

<div>
  <!-- ボタンをクリックするとisPrice関数が実行 -->
  <button @click="isPrice()">半額</button>
  <!-- 250円と表示 -->
  <p>{{ price }}円</p>
</div>

####computedとmethodsの違い

・算出プロパティとメソッドの使い分け

#結論 ＆ 資料

この辺りをある程度理解できればアウトプットに全力を注いでいいと思います。

⭕️　アウトプットやオススメの記事一覧

・Vue.jsを100時間勉強して分かったこと
・5分でわかるVue.js基礎の基礎
・2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器
・Vue-routerを使って、SPAをシンプルにはじめてみる
・vueとexpressでSPAを作る

#あとがき
今回は自分なりにVueについて簡潔にまとめてみした

次回はReactについてまとめてみたいと思います。

Twitter @HomgMuchan ぜひフォロー待っています❗️