M---Model （資料）
V---View (視圖)
VM---VIewModel (轉換器)
VIewModel主要做兩件事：
1、把 Model 中的資料系結到View(視圖層)，
2、監聽VIew （視圖層），把事件，界面操作，回呼給Model中的JavaScript中的物件，函式，
View:視圖層，前端所說的DOM,通常給用戶展示各種資訊，
Model:資料層，里面存放著各種資料，有我們寫死的固定資料，大多數是從網上請求過來的資料，
VIewModel：視圖模型層，它是View和Model的橋梁，一是實作Data Bindings也就是資料系結，將Model中的資料的改變同步到View中去，二是DOM Listeners,也就是DOM監聽，當DOM發生一些事件(點擊，滾動，touch等)可以監聽到，并且改變對應的Data.
計算器小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>當前計數:{{counter}}</h1> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <button v-on:click='add'>+</button> <button v-on:click='sub'>-</button> </div> <script src=https://www.cnblogs.com/DreamchaserHe/p/"./js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log(this.counter); this.counter++ }, sub: function () { console.log(this.counter); this.counter-- } } }) </script></body></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/10542.html
標籤：其他