MVVM模式
MVVM模式是Vue.js的核心鱼鸠，它是一個(gè)Vue實(shí)例猛拴。Vue實(shí)例可以作用某一個(gè)HTML元素上，這個(gè)元素可以是body元素蚀狰，也可以是指定id的元素愉昆。下圖不僅包括了MVVM模式，還顯示了ViewModel是如何和View以及Model是如何聯(lián)系的麻蹋。
如上圖所示跛溉，當(dāng)創(chuàng)建了一個(gè)Vue實(shí)例以后：
從View的這個(gè)方面看，ViewModel中的DOM Listeners工具會(huì)幫我們檢測(cè)頁(yè)面上DOM元素的變化扮授，如果有變化芳室，則更改Model中的數(shù)據(jù)。
從Model這個(gè)方面看刹勃，當(dāng)Model中的數(shù)據(jù)發(fā)生改變時(shí)堪侯，Data Bindings會(huì)負(fù)責(zé)更新頁(yè)面中的DOM元素。
Hello World實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>詳解Vue</title>
</head>
<body>
<!--這是我們的View-->
<div id="app">
{{message}}
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
//這是我們的Model
var exampleData = {
message:'Hello World'
}
//創(chuàng)建一個(gè)Vue實(shí)例或“ViewModel”
//它連接View和Model
new Vue({
el:'#app',
data:exampleData
})
</script>
</html>
使用Vue的過(guò)程就是定義MVVM各個(gè)組成部分的過(guò)程荔仁。
- 定義View
- 定義Model
- 創(chuàng)建一個(gè)Vue實(shí)例用來(lái)連接View和Model
在創(chuàng)建一個(gè)Vue實(shí)例的時(shí)候伍宦，需要傳入一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象可以包括數(shù)據(jù)乏梁、掛載元素次洼、方法、模生命周期鉤子等掌呜。
比如在上一個(gè)實(shí)例中滓玖，Vue實(shí)例中的el屬性指向View，el: '#app'表示將Vue實(shí)例掛載到<div id="app"></div>這個(gè)HTML元素上质蕉。data屬性指向Model势篡，data: exampleData表示我們的Model是exampleData對(duì)象。
