#author("2019-08-08T15:26:11+00:00","default:sagasite","sagasite")
#author("2019-08-08T15:38:57+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]]＞ Chapter 1 Vue.jsって何？
*02 Vue.jsは「データと表示をつなげる仕組み」 [#q6f56b2f]
Vue.jsとは何か？
一言でいえば、「データと表示をつなげる仕組み」です。
**MVVM [#ldcc29a2]
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の利用は広がっている。
&ref(MVVMPattern.png);
***ViewModel [#ha84cec6]
>Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。
すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。
Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。
~
***MVVMの役割分担 [#j9f4e80b]
| パーツ | 役割 |h
| Model | Vue内に用意したデータ |
| View | HTMLで表示している要素 |
|ViewModel | ViewとModelをどのようにつなぐか |
MVVMの仕組みを考えるときは、
+データは何か？（Model）
Webページ上で変化する部分は何か？そのために必要なデータを考えます。
+表示する要素は何か？（View）
そのデータを、HTMLのどこに、どのように表示するのかを考えます。
+どのようにつなぐか？（ViewModel）
HTMLのどこが操作されたとき、データがどのように変化するのかを考えます。
という流れで考えると分かりやすいです。
***使えるデータの種類 [#n007cb73]
Vue.jsで使えるデータは、
-数値型
-文字列型
-ブーリアン型
-配列
-オブジェクト
など、JavaScriptで使えるデータであればすべて使えます。
***Vue.jsの使い方 [#q9f582fb]
データを作って、表示する要素を用意して、つなぎ方を決める
** Vue.jsの主な機能一覧 [#s6c22fd6]
表1.2
| 機能 | 書式 | 解説章 |h
| データをそのまま表示する | {{ データ }} | 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 |
