聊聊MVVM模型在Vue中怎么应用
理解MVVM模型
我们知道每一个 Vue 应用都是从创建一个新的实例开始的，根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发，所以就有了在我们创建 Vue 实例时，文档中经常使用vm这个变量名来表示 Vue 实例。（学习视频分享：vue视频教程）
什么是 MVVM 模型
我们知道了 Vue 借鉴了 MVVM模型的原理，但是我们只知道借鉴这件事，却不知道什么是MVVM模型，这里简单说明一下什么是 MVVM 模型。
MVVM (Model-View-ViewModel) 就是将其中的 View 的状态和行为抽象化，MVVM 模式和 MVC 模式一样，主要目的是分离视图和模型，MVVM 旨在利用 WPF 中的数据绑定函数，通过从视图层中几乎删除所以 GUI 代码，更好地促进视图层开发与模式其余部分的分离，不需要用户体验开发人员编写 GUI 代码，他们可以使用框架标记语言，并创建到应用程序开发人员编写和维护的视图模型的数据绑定。如下图所示：
MVVM模型主要是为了分离视图(View)和模型(Model)，其优点为：低耦合、可重用性、独立开发以及可测试。 视图和模型分离的特点给了 Vue 很大的启发。
MVVM的组成部分
在 MVVM 模式中的组成部分分为以下四种：
Model(模型)：代表真实状态的内容，即数据访问层(包含数据实体以及数据实体的操作)
View(视图)：用户能在屏幕上看到的结构、布局和外观，负责数据显示以及交互方面
ViewModel(视图模型)：暴露公共属性和命名的视图的抽象，将Model和View进行绑定，两者在进行数据更改时能实时刷新。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新；ViewModel能够监听到视图的变化，并能够通知数据发生变化。
绑定器：在视图模型中，在视图与数据绑定器之间进行通信。
Vue中的实现
MVVM即模型-视图-视图模型。模型指的是后端传递的数据；视图指的是所看到的页面。视图模型是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
所以说得到MVVM模型启发的Vue，其核心就是实现了DOM监听与事件绑定，如下一个经典图例：
MVVM模型在 Vue 中的应用
举一个简单的 Vue 案例，来说明 MVVM 的主要三种组成部分在 Vue 中分别代表什么，如下：
<body>
<div id="id">
<h1>姓名：{{name}}</h1>
<h1>国籍：{{address}}</h1>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const vm = new Vue({
data:{
name:'张三',
address:'中国'
}
})
vm.$mount('#id')
console.log(vm);
</script>
</body>
Model：模型层，data里面的数据，表示JS的对象
View：视图层，HTML内容部分，表示HTML中能操作的DOM元素
ViewModel：充当连接视图和数据的中间人，即就是定义了 Observer 观察者身份，即桥梁
当然 MVVM 模型的思想不仅仅只应用在 Vue 上面，其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完这篇文章，能够帮助你对 MVVM 模型有了更深一步的了解。
以上是聊聊MVVM模型在Vue中怎么应用的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
vue.js vs.反应：特定于项目的考虑因素
Apr 09, 2025 am 12:01 AM
Vue.js适合中小型项目和快速迭代，React适用于大型复杂应用。1)Vue.js易于上手，适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富，适合有高性能需求和复杂功能需求的项目。
vue怎么给按钮添加函数
Apr 08, 2025 am 08:51 AM
可以通过以下步骤为 Vue 按钮添加函数：将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。
vue多页面开发是啥意思
Apr 07, 2025 pm 11:57 PM
Vue 多页面开发是一种使用 Vue.js 框架构建应用程序的方法，其中应用程序被划分为独立的页面：代码维护性：将应用程序拆分为多个页面可以使代码更易于管理和维护。模块化：每个页面都可以作为独立的模块，便于重用和替换。路由简单：页面之间的导航可以通过简单的路由配置来管理。SEO 优化：每个页面都有自己的 URL，这有助于搜索引擎优化。
React与Vue：Netflix使用哪个框架？
Apr 14, 2025 am 12:19 AM
NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka
vue的div怎么跳转
Apr 08, 2025 am 09:18 AM
Vue 中 div 元素跳转的方法有两种：使用 Vue Router，添加 router-link 组件。添加 @click 事件监听器，调用 this.$router.push() 方法跳转。
vue怎么实现组件跳转
Apr 08, 2025 am 09:21 AM
Vue 中实现组件跳转有以下方法：使用 router-link 和 <router-view> 组件进行超链接跳转，指定 :to 属性为目标路径。直接使用 <router-view> 组件显示当前路由渲染的组件。使用 router.push() 和 router.replace() 方法进行程序化导航，前者保存历史记录，后者替换当前路由不留记录。
vue怎么a标签跳转
Apr 08, 2025 am 09:24 AM
实现 Vue 中 a 标签跳转的方法包括：HTML 模板中使用 a 标签指定 href 属性。使用 Vue 路由的 router-link 组件。使用 JavaScript 的 this.$router.push() 方法。可通过 query 参数传递参数，并在 router 选项中配置路由以进行动态跳转。
反应，vue和Netflix前端的未来
Apr 12, 2025 am 12:12 AM
Netflix主要使用React作为前端框架，辅以Vue用于特定功能。1)React的组件化和虚拟DOM提升了Netflix应用的性能和开发效率。2)Vue在Netflix的内部工具和小型项目中应用，其灵活性和易用性是关键。
