什么是MVVM模式?
是一种简化用户界面的事件驱动编程方式。
MVVC源于MVC模式,MVVM的核心是ViewModel层,负责转换Model中数据对象来让数据变得更容易管理和使用。
ViewModel向上与view层实现了双向数据绑定
ViewModel向下与modle层通过接口请求数据交互
为什么要使用MVVM模式?
-
低耦合
-
View层和Model层降低了耦合,当view的数据发生变化时,model的数据可以不变化,当model变化的时候view也可以不变
-
-
可复用
- 你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。
-
独立开发
- 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试 界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
-
MVVC的组成部分
什么是Vue?
Vue是一个构建用户界面的渐进式框架,它是自底向上逐层运用。Vue只关注视图层,易于上手,也有第三方库有项目整合,比如 vue-router
Vue.js就是MVVM的实现者,它监听了Dom元素和数据绑定。
第一个Vue程序
-
首先需要在IDEA上安装Vue插件
-
引入Vue
-
安装Vue 包含完整的警告和调试模式: https://vuejs.org/js/vue.js
-
代码编写
- 创建HTML文件
- 引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
- {{ message} 双花括号可以将vue创建的名为message的属性包裹起来,就可以实现数据绑定功能
<div id="vue">
{{message}}
</div>
- 创建一个Vue实例
- el:'#vue' 绑定元素的id
- 通过这样,就绑定了id为vue的div标签
- data:{message:'hello again ,vue!'} ,data里用来存放数据,它是键值对的格式。
- el:'#vue' 绑定元素的id
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
data:{
message:'hello again ,vue!'
}
});
</script>
现在,我们的第一个Vue程序就建立好了。
可以通过浏览器的开发者工具,查看并改变属性的值来确定这一点。
在浏览器上运行第一个vue程序,进入开发者工具,并输入vm.message="你看,改变了"。
这一步并没有去操作DOM元素,就让页面内容产生了变化,这就是借助了Vue的双向绑定。