Vue01-MVVM模式和第一个vue程序

学习VUE，需要先了解MVVM框架

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

MVVM是Model-View-ViewModel的简写本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

 

 

 

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

 

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

 

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

 

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

 

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

 

 

MVVM模式的实现者

  • Model：模型层，在这里表示 JavaScript 对象
  • View：视图层，在这里表示 DOM（HTML 操作的元素）
  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

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

  • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

 

CDN

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 

 

初写代码

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

<!--view层，模板
    使用  {{数据}} 获取model层的数据-->

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

    <!-- 1.导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        //model层：数据
        data:{
            message:"hello,vue！"
        }
    });
</script>

</body>
</html>
1.<span v-bind:title="message"></span>：鼠标悬停几秒查看此处动态绑定message信息
2.{{}}：使用双花括号获取，vue创建的名为message属性包裹起来，既可以实现数据绑定，类似EL表达式的{$}
3.el:"#app"：绑定元素的 ID
4.data:{message:"hello vue!"}：数据对象中有一个名为 message 的属性，并设置了初始值hello,vue!

 

posted @ 2020-03-19 09:16  静静吃榴莲  阅读(123)  评论(0)    收藏  举报