Vue.js

• 簡単に言うと、ユーザーインターフェイスを構築するためのフレームワークのこと
• JavaScriptでDOMを操作するWebアプリケーションを構築するときに向いている
• DOMよりも先にデータが存在していて、それに合わせてDOMが構築される
• HTMLベースのテンプレート構文を使っているので、Vueインスタンスのデータと描画をDOMを宣言的に対応させることができる

Vueインスタンス

varapp=newVue({//下記などのオプションを記述する})

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つのセットにして、他の機能とは分離して開発できるようにする仕組み