文档章节

Vue和MVVM对应关系

o
 osc_x4h57ch8
发布于 2018/04/24 15:52
字数 1005
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

##Vue和MVVM的对应关系

Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系?

###MVVM(Model-view-viewmodel) MVVM还有一种模式model-view-binder,主要用来简化用户界面的事件驱动程序设计

MVVM可以分成四部分

  • Model:模型
  • View:视图
  • ViewModel:视图模型
  • Binder:绑定器

主要形式还是Model-ViewModel-View<br> 模型图

模型:是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)<br> 视图:是用户在屏幕上看到的结构、布局和外观(UI)<br> 视图模型:暴露公共属性和命令的视图抽象。让视图和数据二者进行通信,靠的绑定器 <br> 绑定器:声明性数据和命令绑定

###Vue和这四部分的关系 对应关系:

  • 视图:对应真实的html和css
  • 视图模型:对应Vue的模板语法
  • 绑定器:对应v-bind v-model @click :prop等绑定数据语法
  • 模型:Vue的实例中的那些属性 $data $methods $computed 等等

在一个.vue文件中,我们会看到3部分<template /> <script /> <style /><br> <template /> 负责视图模型和绑定器<br> <style /> 负责视图的CSS<br> <script /> 中定义的Vue实例负责模型的数据管理和绑定器的逻辑

如何用Vue解释Model-ViewModel-View呢?

ViewModel-View阶段

视图模型转化为视图,也即Vue中的模板语法转化为实际的HTML和CSS,这个部分主要由Vue自动实现,我们开发者主要处理的是Model-ViewModel阶段。

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数据的变更<br> ViewModel:是抽象语法,主要是Vue的模板语法,绑定数据,之后Vue会将其转化为真实的HTML<br>

由于,ViewModel和Model主要是绑定关系,也即是数据和视图是绑定的,你什么样的数据就决定了什么样的视图,所以我们一般也把Vue称为数据驱动框架。<br> 所以很多时候,只要知道数据和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><br> 后面arr添加了一个元素6,这时候arr的长度是6,那应该有6个<li>,这就是数据和视图的绑定,由数据的结构我们就可以推出视图的样子。<br> 所以我们要多从操作数据的角度思考问题,当然前提是你已经确定了Model和ViewModel的绑定关系是怎样的。这个时候我们只需操作Model就可以了。<br>

上面的例子采用的数据结构是数组,当然还有很多数据结构。Model和ViewModel绑定后,基本上Model的数据结构就决定了。那么这时,我们只需根据这个Model的数据结构增删修改。<br> 还有一点就是vue中有多种绑定方式,v-if v-for 等等,一个ViewModel只有一个Model的数据结构,但是相同的View可以有多种ViewModel<br> 比如这个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>

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

渗透测试的概念和实战

目录 1. 前言 2. 常见web安全漏洞 3. 思路 3.1渗透测试思路 3.2黑客攻击思路 4. 暴力破解 4.1谷歌黑语法 4.1.1 黑语法inurl:搜索url包含指定字符串 4.1.2 黑语法intitle:搜索网页中的标题名...

六道木
33分钟前
19
0
Nginx搭建

Web服务器 放置网站文件,全世界浏览 可以放置数据文件,让全世界可以下载。 Nginx官方网站www.nginx.org #rz nginx-1.11.6.tar.gz #ls #rpm -q zlib-devel pcre-devel #yum –y install zli...

osc_fnto2dbd
44分钟前
14
0
如何在1分钟内CSDN收益1000万,走上人生巅峰?!

事情的起因源于前几日CSDN专栏作者群中有位同志自曝收益:426584.46元(不用数了42万+,未证实是否属实),瞬间刷屏。 那么作为一位普通的技术分享者,是否有机会利用开源项目短时间内赢取白...

osc_8db3mwb5
46分钟前
23
0
【java基础(五十)】为什么要使用泛型程序设计

从Java程序设计语言1.0版发布以来,变化最大的部分就是泛型。致使Java SE 5.0中增加泛型机制的主要原因是为了满足1999年制定的最早的Java规范需求之一(JSR 14)。专家组花费了5年左右的时间...

osc_qcm2mqmy
47分钟前
20
0
如何将Unix时间戳转换为DateTime,反之亦然? - How can I convert a Unix timestamp to DateTime and vice versa?

问题: There is this example code, but then it starts talking about millisecond / nanosecond problems. 有此示例代码,但随后开始谈论毫秒/纳秒问题。 The same question is on MSDN, ......

javail
48分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部