Vue.js

ガイド

https://jp.vuejs.org/v2/guide/

ストーリー形式の解説がされています。
初めてVueを利用されるかたが、まず最初に読むべきドキュメントです。

クックブック

https://jp.vuejs.org/v2/cookbook/

下記のように独立した解説が掲載されています。

VS Code によるデバッグ
Vue コンポーネントを npm パッケージ化する

APIリファレンス

https://jp.vuejs.org/v2/api/

コンポーネントは全てVueインスタンスです。

Rootインスタンス          // new Vueで作成されたVueインスタンス
 ├─ Headerコンポーネント   // Vueインスタンス
 ├─ Menuコンポーネント     // Vueインスタンス
 │  ├─ Itemコンポーネント  // Vueインスタンス
 │  └─ Itemコンポーネント  // Vueインスタンス
 └─ Footerコンポーネント   // Vueインスタンス

APIリファレンスから インスタンスプロパティ インスタンスメソッド の利用方法を確認できます。

スタイルガイド

https://jp.vuejs.org/v2/style-guide/

下記のように、Vue.jsを利用する上で気をつけるべき記述方法を確認できます。

コンポーネントの命名
- 複数単語にすべき
- 1つしかアクティブにならないなら The というプレフィックスをつける
v-for と一緒に v-if を使うのを避ける

定期的に読み返したい内容です。

利用例

https://jp.vuejs.org/v2/examples/

下記のように、Vue.jsの利用例を確認できます。

Markdown エディタの例
Firebase + バリデーションの例

リポジトリ

https://github.com/vuejs/vue

Vue CLI｜開発環境構築ツール

概要

Vue CLIを利用することで、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。

リンク

ドキュメント
- https://cli.vuejs.org/guide/
リポジトリ
- https://github.com/vuejs/vue-cli

Vue Loader｜Webpackのローダー

概要

Webpackのローダーです。SFC(Single-File Component) 形式で書かれた .vueファイル をJavaScriptコードにコンパイルします。

リンク

ドキュメント
- https://vue-loader.vuejs.org/
リポジトリ
- https://github.com/vuejs/vue-loader

Vuex｜状態管理

概要

Vuexは、アプリケーション内の全てのコンポーネントで共有する 状態 を管理します。
以下のようなケースで活躍します。

兄弟コンポーネント間でデータを共有したいとき
階層が深い親子関係でデータを共有したいとき

アプリケーションの規模が大きくなるほど役立つライブラリです。

構成要素

Vuexの構成要素は以下のようになります。

store：アプリケーションの状態と状態の操作方法を持つコンテナ。

state：アプリケーションの状態。

mutations：stateを変更するためのもの。

actions：必要に応じて外部APIの呼び出しなどを行い mutationを呼び出す。

getters：stateをもとに値を返す。

modules：storeを管理しやすくするために、ストア内部でモジュール単位に分割できる。

Vuexドキュメントのモジュールで書かれている内容ですが、ソースで表すと以下のようになります。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})