vue-第一个vue程序

最新推荐文章于 2023-04-24 14:22:07 发布

敏姐儿

最新推荐文章于 2023-04-24 14:22:07 发布

阅读量87

点赞数

分类专栏： VUE 文章标签： vue.js wpf 前端

本文链接：https://blog.csdn.net/weixin_46128463/article/details/122432519

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

VUE

一什么是 MVVM
二为什么使用 MVVM

一什么是 MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

看着上面的介绍不要被劝退，跟着我一步步解析

1 首先，建立一个空白的.html文件

在这里插入图片描述

2 将下面的代码复制进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
    {{message}}
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 模版
        el:"#app",
        data:{
            message:"helloVue!"
        }
    });
</script>

</body>
</html>

3 结合控制台理解

下图中所包含的就是模版
模型数据

    var vm = new Vue({
        // 模版
        el:"#app",
        data:{
            message:"helloVue!"
        }
    });

数据模版交互

二为什么使用 MVVM

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