vue中的—MVVM(面試必問)
- 2019 年 10 月 14 日
- 筆記
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="./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>
