Introduction-to-Vuejs-Development_1-02
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue.js開発入門]]＞ Chapter 1 Vue.jsって何？
*02 Vue.jsは「データと表示をつなげる仕組み」 [#q6f56b2f]
Vue.jsとは何か？
一言でいえば、「データと表示をつなげる仕組み」です。
**MVVM [#ldcc29a2]
Vue.jsは「MVVM」という考え方に基づいて作られています。
-Model View ViewModel - Wikipedia https://ja.wikipedia.or...
>Model-View-ViewModel (MVVM、モデル・ビュー・ビューモデル...
独自のグラフィカルユーザインタフェース (GUI) を持つアプリ...
Model-View-Controller (MVC) の派生パターンであり、特にPre...
MVVMを考慮してアプリケーションを開発する目的は、他のMVC系...
元来マイクロソフトのユーザインタフェースサブシステムであ...
&ref(MVVMPattern.png);
***ViewModel [#ha84cec6]
>Viewを描画するための状態の保持と、Viewから受け取った入力...
すなわちViewとModelの間の情報の伝達と、Viewのための状態保...
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 | Chapt...
| 部品にまとめる | component | Chapter 12 |
終了行:
[[Vue.js開発入門]]＞ Chapter 1 Vue.jsって何？
*02 Vue.jsは「データと表示をつなげる仕組み」 [#q6f56b2f]
Vue.jsとは何か？
一言でいえば、「データと表示をつなげる仕組み」です。
**MVVM [#ldcc29a2]
Vue.jsは「MVVM」という考え方に基づいて作られています。
-Model View ViewModel - Wikipedia https://ja.wikipedia.or...
>Model-View-ViewModel (MVVM、モデル・ビュー・ビューモデル...
独自のグラフィカルユーザインタフェース (GUI) を持つアプリ...
Model-View-Controller (MVC) の派生パターンであり、特にPre...
MVVMを考慮してアプリケーションを開発する目的は、他のMVC系...
元来マイクロソフトのユーザインタフェースサブシステムであ...
&ref(MVVMPattern.png);
***ViewModel [#ha84cec6]
>Viewを描画するための状態の保持と、Viewから受け取った入力...
すなわちViewとModelの間の情報の伝達と、Viewのための状態保...
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 | Chapt...
| 部品にまとめる | component | Chapter 12 |
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
