Vue.jsに入門！Vue.jsの解説記事27個！

Vue.jsの記事がたまってきたので、まとめてみました。公式サイトと一緒に参考にしてみてください。
Vue.jsを使い始める方法から、機能の解説、ライブラリの説明などのリンクを一言そえて置いています。

Vue.jsを使い始める

Vue.jsを使い始めるときに参考になりそうな記事です。
基本的にはNode.jsが動く環境を作成して、Vue CLIを使用してプロジェクトを作成して使い始めると良いかと思います。

Dockerを使用したい

下記はDockerでVue.jsが動く環境を作成するといった記事です。
Dockerを使用することで、ローカルに直接Node.jsを入れずにVue CLIが動くプロジェクトを作成することが可能です。

Node.jsを入れている環境で使い始める

環境によっては、Dockerが重たい場合などもあるかと思います。
その場合はローカルにNode.jsを導入して、Vue CLIを使い始めると良いかと思います。
下記の2つの記事に、MacまたはWindowsでのNode.jsの導入方法を書きました。

Node.jsを導入した後は、Node.jsと一緒にインストールされるnpmを使用して、Vue CLIをインストールすると良いです。

CDNを使用して使い始める

どんなものか試したい場合やサクッと使ってみたい場合は、CDNを使用して始めることも可能です。

Vue.jsのバージョンがわからない場合は、下記の記事で確認してみてください。

Vue.jsの機能についての解説

Vue.jsについての機能を解説した記事をまとめました。

コンポーネントを作る

Vue.jsではコンポーネントを組み合わせて、アプリケーションにしていきます。
下記の記事では簡単なコンポーネントを作成して、動作を確認してみています。

v-bind

v-bindについて書いています。
Vue.jsで作成した変数をタグに適用して、動的にタグの属性やコンポーネントのPropsを変更することが可能です。

v-model

v-modelはフォームコントロールのタグで使用します。
入力された内容と、変数の内容を同期してくれます。

v-if, v-else, v-show

v-if・v-elseは条件に応じて、画面に表示する内容を変えたい場合に使用します。
また同じように使用できる機能として、v-showがありますがv-ifとv-showの違いについても書いてみています。

v-for

v-forはスクリプトで定義した配列をループさせて、画面に表示するときに使用します。

computed

computedは変数の内容を計算して、画面に表示するような、ちょっと複雑な内容を関数にまとめることができる機能です。

watch

watchを使用すると、変数の内容を監視することができます。
そして、値が変えられた時に処理を行います。

slot

slotを使用すると、呼び出し元の親コンポーネントから子コンポーネントに対して、HTMLコンテンツを渡すことができます。

emit

emitを使用することで、任意のタイミングで子コンポーネントから呼び出した親コンポーネントに値を返したりすることができます。

下記はCompositon APIに特化して、書いてみました。

refs

refsを使用することで、呼び出し元の親コンポーネントから子コンポーネントの変数や要素を参照することが可能です。

provide/inject

provideとinjectを使用すると、親コンポーネントで設定した値が全ての子コンポーネントから取得することが可能になります。
この機能を利用して、全体の状態管理を行えるグローバルなストアを作成することが可能です。

イベント

ボタンをクリックしたなどのイベントで、よく使いそうなものを7つ書いてみました。

ライフサイクル

Vue.jsのコンポーネントのライフサイクルについて書いています。
Compotision APIでのライフサイクルについて説明しています。

Vue.jsのライブラリ

Vue.jsのライブラリについてです。

Vue Routerについて

Vue Routerを使用することで、画面単位でコンポーネントを作って、遷移させるといった実装が簡単にできます。
いわゆるSPA(シングルページアプリケーション)の作成が可能になります。

Vue Routerに関する記事は3個書いています。

Vuelidate

Vuelidateを使用することで、フォームのバリデーションを簡単につけることが可能です。