Vue和MVVM的對應關係

Vue是受MVVM啓發的,那麼有哪些相同之處呢?以及對應關係?css

MVVM(Model-view-viewmodel)

MVVM還有一種模式model-view-binder,主要用來簡化用戶界面的事件驅動程序設計html

MVVM能夠分紅四部分vue

  • Model:模型
  • View:視圖
  • ViewModel:視圖模型
  • Binder:綁定器

主要形式仍是Model-ViewModel-View

模型圖數組

模型:是指表明真實狀態內容的領域模型(面向對象),或指表明內容的數據訪問層(以數據爲中心)

視圖:是用戶在屏幕上看到的結構、佈局和外觀(UI)

視圖模型:暴露公共屬性和命令的視圖抽象。讓視圖和數據兩者進行通訊,靠的綁定器

綁定器:聲明性數據和命令綁定bash

Vue和這四部分的關係

對應關係:數據結構

  • 視圖:對應真實的html和css
  • 視圖模型:對應Vue的模板語法
  • 綁定器:對應v-bind v-model @click :prop等綁定數據語法
  • 模型:Vue的實例中的那些屬性
    datamethods $computed 等等

在一個.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>

相關文章
相關標籤/搜索