Vue.js開発入門＞ Chapter 1　Vue.jsって何？

02　Vue.jsは「データと表示をつなげる仕組み」 †

Vue.jsとは何か？
一言でいえば、「データと表示をつなげる仕組み」です。

MVVM †

Vue.jsは「MVVM」という考え方に基づいて作られています。

• Model View ViewModel - Wikipedia https://ja.wikipedia.org/wiki/Model_View_ViewModel

  Model-View-ViewModel (MVVM、モデル・ビュー・ビューモデル) は、ソフトウェアアーキテクチャパターンのひとつ。
  独自のグラフィカルユーザインタフェース (GUI) を持つアプリケーションを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装する方法。
  Model-View-Controller (MVC) の派生パターンであり、特にPresentation Modelパターンを直接の祖先に持つ。
  MVVMを考慮してアプリケーションを開発する目的は、他のMVC系のパターンと同様にアプリケーションの「プレゼンテーションとドメインを分離」することで、アプリケーション開発における保守性・開発生産性に寄与することである。
  元来マイクロソフトのユーザインタフェースサブシステムであるWindows Presentation Foundation (WPF) やSilverlightの世界で生まれた考え方ではあるが、現在はAndroidやウェブブラウザ上でのJavaScriptの世界でもMVVMの利用は広がっている。

ViewModel †

Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。
すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。
Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。

MVVMの役割分担 †

MVVMの仕組みを考えるときは、

1. データは何か？（Model）
   　Webページ上で変化する部分は何か？そのために必要なデータを考えます。
2. 表示する要素は何か？（View）
   　そのデータを、HTMLのどこに、どのように表示するのかを考えます。
3. どのようにつなぐか？（ViewModel）
   　HTMLのどこが操作されたとき、データがどのように変化するのかを考えます。
   という流れで考えると分かりやすいです。

使えるデータの種類 †

Vue.jsで使えるデータは、

• 数値型
• 文字列型
• ブーリアン型
• 配列
• オブジェクト
  など、JavaScriptで使えるデータであればすべて使えます。

Vue.jsの使い方 †

データを作って、表示する要素を用意して、つなぎ方を決める

Vue.jsの主な機能一覧 †

表1.2