Vuejs學習筆記(一)-3.vue中的MVVM
阿新 • • 發佈：2021-06-30
上圖就是vue的MVVM設計架構。View-ViewModel-Model
對於簡單的vue程式碼，是按照一下方式分層。
View層表示展示層，渲染DOM後給最終客戶看到的層，即介面和介面資料。
ViewModel層叫做檢視介面卡。即資料屬性與View元素之間的雙向繫結關係
Model層資料層。
所以最關鍵的位置在於ViewModel層，做了頁面元素的監聽（Dom listeners）和資料雙向繫結（Data bindings）操作。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5<title>03-計數器</title> 6 <style> 7 div { 8 color: #313131; 9 } 10 </style> 11 </head> 12 <body> 13 14 <!--監聽事件 v-on:click --> 15 <!--語法糖@click 就等於 v-on:click--> 16 <!--div 屬於view層--> 17 <div id="app1"> 18 <h2>當前計數:{{ counter }}</h2> 19<!-- <button v-on:click="counter++">+</button>--> 20 <!-- <button v-on:click="counter--">-</button>--> 21 22 <button v-on:click="add">+</button> 23 <button @click="sub">-</button> 24 </div> 25 <script src="../js/vue.js"></script> 26<script> 27 28 <!-- 29 script下的obj屬於model層--> 30 const obj = { 31 counter: 0 32 } 33 <!--script下的new Vue()屬於viewModel層，資料繫結關係--> 34 const app = new Vue({ 35 el: '#app1', 36 data: obj, 37 methods: { 38 add: function () { 39 console.log('執行add'); 40 this.counter++; 41 }, 42 sub: function () { 43 console.log('執行sub'); 44 this.counter--; 45 } 46 }, 47 58 }) 59 60 61 </script> 62 </body> 63 </html>
由以上這個概念即可，後續再深入研究