Vue:MVVM模式和第一个Vue程序

 

什么是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程序

 

1. 首先需要在IDEA上安装Vue插件
2. 引入Vue
   • 安装Vue  包含完整的警告和调试模式： https://vuejs.org/js/vue.js
   • 或者引入CDN   <script src=" https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>

代码编写

•  创建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里用来存放数据，它是键值对的格式。

<script type="text/javascript">

    var vm = new Vue({

      el:'#vue',

      data:{

        message:'hello again ,vue!'

      }

    });

</script>

现在，我们的第一个Vue程序就建立好了。

可以通过浏览器的开发者工具，查看并改变属性的值来确定这一点。

在浏览器上运行第一个vue程序，进入开发者工具，并输入vm.message="你看，改变了"。

这一步并没有去操作DOM元素，就让页面内容产生了变化，这就是借助了Vue的双向绑定。