vue.js的M-V-VM思想
阿新 • • 發佈：2021-10-01
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model指代的就是vue物件的data屬性裡面的資料。這裡的資料要顯示到頁面中。
View指代的就是vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” 。
ViewModel指代的是vue.js中我們編寫程式碼時的vm物件了，它是vue.js的核心，負責連線 View 和 Model，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的。
編寫程式碼，讓我們更加清晰的瞭解MVVM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// 建立vm物件
var vm = new Vue({
el: "#app",
data: {
name:"yuan",
age:22,
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 在雙標籤中顯示資料要通過{{ }}來完成 -->
<h1 ref='title'>{{name}}</h1>
<p>{{age}}</p>
</div>
</body>
</html>
在瀏覽器中可以在 console.log通過 vm物件可以直接訪問el和data屬性,甚至可以訪問data裡面的資料：
console.log(vm) // box vm物件可以控制的範圍
console.log(vm.$el) // box vm物件可以控制的範圍
console.log(vm._data); // vm物件要顯示到頁面中的資料
console.log(vm._data.name); // 訪問data裡面的資料
console.log(vm.name); // 這個 name就是data裡面宣告的資料,也可以使用 vm.變數名顯示其他資料,name只是舉例.
console.log(vm.$refs.title) // 結果就是獲取頁面中ref = "title"的html元素，類似docment.querySelector("[ref=title]")