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の利用は広がっている。

MVVMPattern.png

ViewModel

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

MVVMの役割分担

パーツ役割
ModelVue内に用意したデータ
ViewHTMLで表示している要素
ViewModelViewとModelをどのようにつなぐか

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

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

使えるデータの種類

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

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

Vue.jsの使い方

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

Vue.jsの主な機能一覧

表1.2

機能書式解説章
データをそのまま表示する{{ データ }}Chapter 2
要素の属性をデータで指定するv-bindChapter 3
入力フォームとデータをつなげるv-modelChapter 4
イベントをつなぐv-onChapter 5
条件によって表示するv-ifChapter 6
くり返し表示するv-forChapter 6
データを使って別の計算をするcomputedChapter 8
データの変化を監視するwatchChapter 8
表示/非表示時にアニメーションするtransitionChapter 10
部品にまとめるcomponentChapter 12

添付ファイル: fileMVVMPattern.png 6件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-09 (金) 00:13:30 (72d)