Vue是受MVVM啓發的,那麼有哪些相同之處呢?以及對應關係?css
MVVM還有一種模式model-view-binder,主要用來簡化用戶界面的事件驅動程序設計html
MVVM能夠分紅四部分vue
Model:模型
View:視圖
ViewModel:視圖模型
Binder:綁定器
主要形式仍是Model-ViewModel-View數組
模型:是指表明真實狀態內容的領域模型(面向對象),或指表明內容的數據訪問層(以數據爲中心)
視圖:是用戶在屏幕上看到的結構、佈局和外觀(UI)
視圖模型:暴露公共屬性和命令的視圖抽象。讓視圖和數據兩者進行通訊,靠的綁定器
綁定器:聲明性數據和命令綁定bash
對應關係:數據結構
在一個.vue
文件中,咱們會看到3部分<template />
<script />
<style />
<template />
負責視圖模型和綁定器<style />
負責視圖的CSS<script />
中定義的Vue實例負責模型的數據管理和綁定器的邏輯框架
如何用Vue解釋Model-ViewModel-View呢?函數
ViewModel-View階段佈局
視圖模型轉化爲視圖,也即Vue中的模板語法轉化爲實際的HTML和CSS,這個部分主要由Vue自動實現,咱們開發者主要處理的是Model-ViewModel階段。ui
Model-ViewModel階段
這個階段就是咱們實例化Vue對象,添加data,methods等操做,以及將數據綁定到模板上。
<template>
<div class='test' @click='add'>{{count}}</div>
</template>複製代碼
// <script>
export default {
data () {
return {
count: 0
}
},
methods: {
add (e) {
this.count += 1
}
}
}複製代碼
Model:定義data函數管理數據count,以及定義add函數控制count數據的變動
ViewModel:是抽象語法,主要是Vue的模板語法,綁定數據,以後Vue會將其轉化爲真實的HTML
因爲,ViewModel和Model主要是綁定關係,也便是數據和視圖是綁定的,你什麼樣的數據就決定了什麼樣的視圖,因此咱們通常也把Vue稱爲數據驅動框架。
因此不少時候,只要知道數據和ViewModel的關係,也就知道UI的樣子了,這個時候,咱們只需操做數據的結構,也就操做了視圖。
<template>
<ul class='list'>
<li class='item' v-for='(v, index) in arr' :key='index'>{{v}}</li>
</ul>
</template/>複製代碼
export default {
data () {
return {
arr: [1, 2, 3, 4, 5]
}
},
created () {
// 改變數據arr的數據結構,添加新的數值
this.arr.push(6)
}
}複製代碼
Model和ViewModel的關係:
arr和<li>
標籤綁定,有多少個arr元素就有多少個<li>
後面arr添加了一個元素6
,這時候arr的長度是6,那應該有6個<li>
,這就是數據和視圖的綁定,由數據的結構咱們就能夠推出視圖的樣子。
因此咱們要多從操做數據的角度思考問題,固然前提是你已經肯定了Model和ViewModel的綁定關係是怎樣的。這個時候咱們只需操做Model就能夠了。
上面的例子採用的數據結構是數組,固然還有不少數據結構。Model和ViewModel綁定後,基本上Model的數據結構就決定了。那麼這時,咱們只需根據這個Model的數據結構增刪修改。
還有一點就是vue中有多種綁定方式,v-if v-for 等等,一個ViewModel只有一個Model的數據結構,可是相同的View能夠有多種ViewModel
好比這個View<div>hello</div>
,有多種ViewModel均可以生成這個,有多種ViewModel也即有多種Model(數據結構)
<template>
<div>{{data}}</div>
<div>{{obj.data}}</div>
<div>{{arr[0]}}</div>
</template>複製代碼
export default {
data () {
return {
data: 'hello',
obj: {
data: 'hello'
},
arr: ['hello']
}
}
}複製代碼
上面有3種ViewModel和3種Model 但生成的View都是同樣的<div>hello</div>