Vue.js
- 簡単に言うと、ユーザーインターフェイスを構築するためのフレームワークのこと
- JavaScriptでDOMを操作するWebアプリケーションを構築するときに向いている
- DOMよりも先にデータが存在していて、それに合わせてDOMが構築される
- HTMLベースのテンプレート構文を使っているので、Vueインスタンスのデータと描画をDOMを宣言的に対応させることができる
Vueインスタンス
var app = new Vue({
//下記などのオプションを記述する
})
el
アプリケーションを紐付ける要素のセレクタ
data
アプリケーションで使用するデータ、オブジェクトや配列も登録できる
computed
dataと似たように扱うことのできる、関数によって算出されたデータ、算出プロパティ
mothods
このアプリケーションで使用するメソッド、コードを管理しやすくするために処理を分けたり、イベントハンドラなど細かな実装を担当する
DOM
- JavascriptからHTMLやCSSのデータを取得、操作するための仕組み
データバインディング
- データと描画を同期させる仕組みのこと
- JavaScriptとのデータとそれを使用する場所を紐付け、データに変化があれば自動的にDOMを更新する
ディレクティブ
- 接頭辞「 v- 」が付いたVue.jsの特別な属性のことで、テンプレートとロジックを関連付ける (下記が代表的なもの)
v-for
配列やオブジェクトから要素を繰り返し描画する
v-on
DOMイベントのハンドリングに使う
v-model
データとフォームの入力項目のバインド(関連付け)をする
v-if
テンプレートベースで条件分岐をする
コンポーネント
- 再使用可能なVueインスタンスを作ること
- 機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組み