VUE-01-MVVM模式和第一个vue程序-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_41656912/article/details/115317147

本文介绍了Vue.js的基本概念和MVVM模式的优势，包括低耦合、可重用性和独立开发等。重点讲解了ViewModel在MVVM中的核心作用，即双向数据绑定，以及如何通过简单的Vue程序体验这一特性。最后，强调了Vue.js在前后端分离方案中的重要地位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE-01-MVVM模式和第一个vue程序

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM优点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）[SOC原则,关注点分离]，有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

ViewModel是MVVM的核心

该层向上与视图层进行双向数据绑定

向下与Model层通过接口请求进行数据交互

数据的双向绑定

我们知道,要想对前端的元素进行改变(以普通的文字为例)

要么直接修改文字,然后刷新浏览器

要么操作DOM,但是操作DOM意味着查找,意味着"卡顿,低效"

数据的双向绑定则是一个质的飞跃

第一个VUE程序

体验数据的双向绑定

导入

<body>
    <!-- view层:模板 -->
    <div id="app">
        <h1>{{message}}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            // model: 数据
            data:{message:"hello vue"}
        })
    </script>
</body>