如何理解MVVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input v-model='title'/>
<button v-on:click='add'>submit</button>
<ul v-for='item in list'>
{{item}}
</ul>
</div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var data = {
title: '',
list: []
} var vm = new Vue({
el: '#app',
data: data,
methods: {
add: function(){
this.list.push(this.title);
this.title = ''
}
}
})
</script>
</body>
</html>
看这段demo。上面是view层,中间data是数据源,下面vm对应的就是vm,vm就是view model。就是view和model中间的一个桥。完成了视图中数据的绑定。视图中数据的变化需要vm来控制。有vm的存在,彻底的分离view 和 model
如何理解MVVM的更多相关文章
- 理解MVVM在react、vue中的使用
理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view) :是应用程序中数据显示的部分. ...
- 深入理解MVVM模式中Silverlight的Trigger、Action和Behavior及Silverlight的继承机制
接触Silverlight已经有两三个月了,开始一直感觉他和Winform很相似,拖拖控件就行了,所以一直把经历放在了研究后台和服务器交互和性能优化上面,很少去仔细研究Silverlight的页面.前 ...
- UWP开发-重新理解MVVM
MVVM是一个比较热门的开发框架,尽管已经出现很久了,仍然比较受欢迎.MVVM框架包括: M:Model:Model指的是数据模型,例如你要在页面展示联系人信息,那么Model就是联系人的模型,包括联 ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
- 如何理解MVVM?
随着前端页面越来越复杂,用户对于交互性要求也越来越高,MVVM模型应运而生. MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,V ...
- 怎样理解 MVVM ( Model-View-ViewModel ) ?
MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM的一些肤浅的认识. 1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery ...
- extJs学习基础5 理解mvvm的一个小案例
今天很是幸运,看到了一位大神的博客,学习了不少的东西.太感谢了.(满满的都是爱啊) 建议去学习这个大神的博客,真心不错. 博客地址:http://blog.csdn.net/column/detail ...
- 理解MVVM模式
1.WPF的核心是数据绑定. 2.考虑这样一个场景:界面上有一个TextBox显示Person的年龄,一个Button,点击一次Button,年龄加1. 3.做一个View,上面有TextBox和Bu ...
- 我理解的MVC
前言 前一阶段对MVC模式及其衍生模式做了一番比较深入的研究和实践,这篇文章也算是一个阶段性的回顾和总结. 经典MVC模式 经典MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的 ...
随机推荐
- Ubuntu18使用netplan设置网络
参考:https://my.oschina.net/u/2306127/blog/2877106 https://blog.csdn.net/peyte1/article/details/805090 ...
- Keil MDK仿真调试STM32的时候直接进入SystemInit函数
1. 仿真的时候,进入之后 2. 说是main()未定义,可是明明定义了,什么原因?喔,看错了,是--main.对比了一下和正常工厂的配置,都一样,换个jlink V9测试一下吧.换了个ST LINK ...
- 关于STM32F405的GPIO中断问题
1. 下面的图,应该是多个引脚中断挂在同一个中断号上面,也就是PA0和PB0同时挂在一个中断源上面,那么就是说只能同时使用其中一个 寄存器的配置,确实只能有一个使用
- jvm(1)---java内存结构
jvm主要由三个子系统构成:类加载子系统,运行时数据区,执行引擎 运行时数据区主要包括: 1.本地方法栈:登记native方法,执行时加载本地方法库 2.程序计数器:就是一个指针,用来存储指向下一条执 ...
- Ubuntu12.10添加matlab启动器
首先我们要了解,Ubuntu 的 Dash 里所有程序都是在 /usr/share/applications 中的,所以我们的思路很简单——建一个类似于“快捷方式”一样的东西扔进去就好了. 1. 终端 ...
- DRF+Vue项目(一)——项目架构
永久配置安装源 为了加速模块的下载 1.文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2.新建 pip 文件夹并 ...
- IIS不能下载config配置文件的解决方法
之前作程序升级的时候,需要从服务端下载后缀为config的配置文件,结果程序抛出404异常.后来百度才知道,是IIS禁止下载config文件的原因.在这里记录一下解决方法. 在我的电脑,右键管理,打开 ...
- Qt4 和 Qt5 模块的分类
Qt5 与 Qt4 其中的一个区别是底层架构进行了改变,Qt5 引入了更加详细的模块化的概念,将众多功能细分到几个模块之中,Qt4 则是一种粗略的划分.本文主要对 Qt5 和 Qt4的模块进行一个简单 ...
- shell 学习笔记4-shell内置变量命令
一.shell 的一些内置命令 常用的一内部命令有:echo.eval.exec.export.read.shift 1.echo命令-在屏幕中输出信息 1)说明 格式:echo args #< ...
- 文件流FileStream的读写
1.FileStream文件流的概念: FileStream 类对文件系统上的文件进行读取.写入.打开和关闭操作,并对其他与文件相关的操作系统句柄进行操作,如管道.标准输入和标准输出.读写操作可以指定 ...