Vue的概述和简单的实现，以及解析什么是MVVM |
您所在的位置：网站首页 › MVVM架构由什么组成 › Vue的概述和简单的实现，以及解析什么是MVVM |
Vue的概述和简单的实现，以及解析什么是MVVM
|
1.1 什么是MVVM
MVVM（Model-View-ViewModel）是一种软件设计模式， 是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示) 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互) 视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环 1.4为什么使用 Vue.js轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+， React压缩后44kb+)移动优先。更适合移动端， 比如移动端的Touch事件易上手，学习曲线平稳，文档齐全 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并 拥有自己独特的功能，如：计算属性开源，社区活跃度高 1.5 第一个Vue程序(Hello Vue)首先我们要在Idea 安装 vue.js 的插件 ， 导入 Vue.js：我们通常使用cdn导入 创建一个空项目，创建一个文件夹，new一个HTML文件 ，编写代码 入门程序 {{message}} 插值语法， --> var vm = new Vue( { el: "#app", data: { //data 就是相当于Model 模型数据层 message:"hello vue" //可以直接控制这个变量得到新值 } });说明 el : "#app" -----> 绑定元素的IDdata:{message:“hello vue”} ----> 数据对象中有一个名为message的属性，并设置了初始值 {{message}} -----> 实现数据绑定功能 Vue 常用的有七大属性 参考：Vue 的七大 常用属性_想成为大神说32的博客-CSDN博客
Vue双向绑定，可以通过控制台 （对象.数据变量）直接改变，前端不需要刷新，就能得到 前端不用操作dom 前端不用改变初始数据，通过后台的控制响应，可以得到，新的数据，并不影响前面的初始 |
【本文地址】
今日新闻 |
推荐新闻 |