MVVM模式分析“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情” 一.

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情”

一.了解一下什么是MVVM?

MVVM（Model-View-ViewModel）它是一种软件设计模式。
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。
MVVM的作用：该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

二.为什么要使用MVVM？

主要目的是分离视图（View）和模型（Model）。

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

Model：模型层，在这里表示JavaScript对象

View：视图层，在这里表示DOM(HTML操作的元素)

ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>cVzhanshi</title>
</head>
<body>

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

    <!--1.导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        // 创建一个Vue实例
        var vm = new Vue({
            el:"#app",
           
        });
    </script>
</div>
</body>
</html>

指令的意思是：将这个元素节点的 title attribute 和 Vue 的 message property 保持一致” 输入 app.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中

优点：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情”