![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Vue.js開発入門＞ Chapter 1 Vue.jsって何？
Vue.jsとは何か？
一言でいえば、「データと表示をつなげる仕組み」です。
Vue.jsは「MVVM」という考え方に基づいて作られています。
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の利用は広がっている。
Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。
すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。
Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。
| パーツ | 役割 |
| Model | Vue内に用意したデータ |
| View | HTMLで表示している要素 |
| ViewModel | ViewとModelをどのようにつなぐか |
MVVMの仕組みを考えるときは、
Vue.jsで使えるデータは、
データを作って、表示する要素を用意して、つなぎ方を決める
表1.2
| 機能 | 書式 | 解説章 |
| データをそのまま表示する | {{ データ }} | Chapter 2 |
| 要素の属性をデータで指定する | v-bind | Chapter 3 |
| 入力フォームとデータをつなげる | v-model | Chapter 4 |
| イベントをつなぐ | v-on | Chapter 5 |
| 条件によって表示する | v-if | Chapter 6 |
| くり返し表示する | v-for | Chapter 6 |
| データを使って別の計算をする | computed | Chapter 8 |
| データの変化を監視する | watch | Chapter 8 |
| 表示／非表示時にアニメーションする | transition | Chapter 10 |
| 部品にまとめる | component | Chapter 12 |
MVVMPattern.png
