本文介绍了MVVM设计模式及其在Vue.js中的应用，强调了其低耦合、可复用和独立开发的优势。通过创建Vue的第一个程序，展示了如何导入Vue包、编写Vue代码并实现数据绑定。在Vue中，前端与后端的数据交互变得更加简单，只需关注ViewModel即可。这使得页面代码无需改动，只需调整ModelView即可更新数据。
2.Vue的第一个程序
1.MVVM
Model-View-ViewModel ，一种软件架构设计模式。源于MVC模式 ，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让对象变得更容易管理和使用。
- 向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
优势
- 低耦合 ：视图（View）可以独立于Model的变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以保持不败你，当Model变化的时候View也可以保持不变
- 可复用 ： 可以把视图逻辑放在一个ViewModel里面，让多个View进行重用
- 独立开发 ： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
- 可测试 ： 可以针对ViewModel进行测试
2.创建Vue新项目
2.1 导入vue包
-
下载对应js文件导入
-
通过cdn形式导入 ：
2.2idea下载vue插件
2.3 编写vue代码
这个时候vue对象已经绑定了对应的DOM元素，vue对象变化，DOM的值也会直接动态变化。 而在普通JavaScript中，修改元素的value必须要页面刷新才有作用， 否则就必须使用JavaScript修改DOM元素。
2.4Vue与以往开发的不同
在以往开发的时候，会在前端手动绑定数据， 然后通过 ${} el表达式获取到从后端传来的数据 。但是 在vue开发中，前端的数据是通过{{message}}从ModelView中获取的 ， 后端只需要把值传给ViewModel ，前端的页面代码完全可以不用改变，只改变ModelView即可实现获取数据的改变
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
