Vue.jsの基本

Tag:

Vue.jsの基本的な使い方を押さえるためのリンク集です。Vue.jsは、ドキュメントが充実してていいですね!

参考サイト

Vue.jsを利用する際に参考となるサイトです。

ディレクティブ、構文を理解する

ディレクティブ、構文 概要
{{}}
(Mustache構文)
プレーンなテキストして扱う。内部に単一のJavaScript式を含むことができる。
v-once 一度だけ描画。
v-html プレーンなHTMLとして扱う。XSS注意。
v-bind(:) 要素の属性を束縛。親から子コンポーネントへと動的にデータを渡すのにも利用。
v-if 条件付きレンダリング。要素自体を制御。
v-show 条件付きレンダリング。CSSで制御(display:none)。
v-for 配列、オブジェクトのプロパティなどのリスト操作。
v-on(@) イベントハンドリング
v-model フォーム入力時の双方向データバインディング。

Vueインスタンス生成時のオプションを理解する

データ

option 概要
data Vueインスタンスで利用するデータオブジェクトを指定。
コンポーネントではFunction型で登録する
リアクティブの探求
props 親からデータを受け取る。
動的なプロパティ
プロパティ検証
methods Vueインスタンスに組み込まれるメソッド。
computed データの変更に対して反応。
computed内で宣言したプロパティ(算出プロパティ)は、ロジックを持つことができる。テンプレート内にロジックをつめると使いまわせないので、プロパティにロジックを持たせる。methodsでも実現できるが、算出プロパティはキャッシュを利用している。

デフォルトは,getter関数のみ提供しているが、setter関数も利用できる

watch データの変更に対して反応。
データの変更に応じて非同期処理などしたいときに利用。

DOM

option 概要
el Vueインスタンスをマウントする要素を指定。

ライフサイクルフック

vue.jsは、コントローラがない。コンポーネントのカスタムロジックは、ライフサイクルの中に書く。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

アセット

option 概要
filters テキストフォーマットするためのフィルタ(JavaScript関数)。パイプ(|)形式でデータを受け取りフォーマットする。

構成

option 概要
mixins 1. ミックスインオブジェクトを定義
2. 定義したミックスインを利用したいコンポーネント内のmixinsオプションに指定
→ コンポーネントでミックスインオブジェクトで定義されたオプションがマージされる。複数コンポーネントで利用する共通オプションの定義などで便利。

コンポーネント(再利用可能なコード)を理解する

概要
コンポーネントを
グローバルに登録
Vue.component(tagName, options)を利用
コンポーネントをローカルに登録 あるコンポーネント内でのみ利用したいとき。
componentsオプションを利用。
親子関係のデータ伝搬 親から子:子はpropsプロパティで親からのデータを受け取る。
子から親:子が、vm.$emitで親のイベントを呼ぶことで親に伝える。
カスタムイベントとの-v-on-の使用
slot 子コンポーネント内に親のコンテンツを挿入できる。
名前付きslotを利用すると、挿入場所を指定して親のコンテンツを挿入できる。
単一ファイルコンポーネント コンポーネントを構成するための

・テンプレート [template]
・ロジック [script]
・スタイル [style (scoped) ]

を単一の.vue拡張子ファイルに集約させることで、コンポーネント間の関心事項を分離させることができる。

Vuex(状態管理ライブラリ)生成時のオプションを理解する

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

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

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

option 概要
state アプリケーションの状態。
getters ストアのための算出プロパティ。
mutations ストアの状態を変更するためのもの。
actions ミューテーションをコミットする。
modules ストアオブジェクトが大きくなりすぎないように分割するためのもの。

ルーティング

ディレクティブ 概要
router-link aタグとしてレンダリングされる。
router-view パスにマッチするコンポーネントをレンダリングする。

スポンサーリンク