MVVM モーテル

ViewModelに関する理解：
ViewModelは、視覚の状態と行動の2つの部分を含んでいます。モデル層のデータモデルは、状態のみを含んでいます。
例えば、ページのこの部分に何を表示するか、あの部分に何を表示するかは視覚の状態（表示）に属します。一方、ページが読み込まれたときに何が起こるか、ここをクリックしたときに何が起こるか、ここをスクロールしたときに何が起こるかは視覚の行動（インタラクション）に属します。視覚の状態と行動はすべてViewModelにカプセル化されています。このようなカプセル化により、ViewModelはView層を完全に記述することができます。これはフロントエンドとバックエンドの分離において重要な要素です。

コード理解：
//擬似コードの説明：
View層:

ViewModel層:
var app = new Vue({
el: '#app',
data: { // ビューの状態を記述するために使用（モデル層データに基づくものと、純粋なフロントエンド定義の両方がある）
message: 'こんにちは Vue！', // 純粋なフロントエンド定義
server: {}, // モデル層データに基づく二次封装データを格納
},
methods: { // ビューの行動を記述するために使用（完全にフロントエンド定義）
showMessage(){
let vm = this;
alert(vm.message);
}
},
created()
let vm = this;

    // Ajaxでモデル層のデータを取得
    ajax({
        url: '/your/server/data/api',
        success(res){
            // TODO 取得したモデルデータの変換処理を行い、二次封装を実施
            vm.server = res;
        }
    });
}

})

Model層：
{
"url": "/your/server/data/api",
"res": {
"success": true,
"name": "IoveC",
"domain": "www.cnblogs.com"
}
}