Vue:MVVM模式、第一个Vue程序、基础语法

最新推荐文章于 2024-08-03 23:22:49 发布

ZXLzhuzhu

最新推荐文章于 2024-08-03 23:22:49 发布

阅读量282

点赞数

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

本文链接：https://blog.csdn.net/ZXLzhuzhu/article/details/120890311

版权

Vue

MVVM概述

什么是MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软 WPF(用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet，简单点说就是在浏览器上运行的 WPF)的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。

MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel
层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

MMVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js,Angular JS等

为什么使用MVVM

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

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

MVVM的组成部分

View

View是视图层，也就是用户界面。前端主要由HTML和CSS来构建，为了更方便的展现ViewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf等等，各大MVVM框架和Vue.js，AugularJS，EJS等也都由自己来构建用户界面的内置模板语言。

Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述View 层，由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发声也下必低效女麻烟地通问候纵 DOM 去更断视图。

MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要外理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现 事件驱动编程。

View 层展现的不是 Mdel 层的数据，而是 ViewModel 的数据，由:ViewModel 负责与 Model层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

Vue概述

Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如:vue-router，vue-resource，vuex)或既有项目整合。

MVVC模式的实现者

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

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而
ViewModel 就是定义了一个 Observer 观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数
据绑定

为什么要使用 Vue.js

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+，React 压缩后44kb+)
移动优先。更话合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸收了Augular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的g功能，如：计算属性
开源，社区活跃度高
…

第一个Vue程序

【说明】IDEA 可以安装 Vue 的插件!

注意:Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

下载地址

开发版本
- 包含完整的警告和调试模式:https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip:https://vuejs.org/js/vue.min.js
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>

代码编写

Vue.js的核心是实现MVVM模式，它扮演的角色是ViewModel层，所以所谓的第一个应用程序就是战士它的数据绑定功能

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    
</body>
</html>

引入Vue.js

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

创建一个Vue的实例

<script>
    var vm = new Vue({
       
        el: "#app",
        //Model：数据
        data: {
       
           message: "hello,vue!"
          }
    });
</script>

说明：

el: "#vue"：绑定元素的ID
data: {message: "Hello Vue!"}：数据对象有一个名为message的属性，并设置了初始值Hello Vue!

将数据绑定到页面元素
```

<div id="app">
    {
    {message}}
</div>
```
说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来，即可实现数据绑定功能，也就实现了ViewModel层所需的效果，和EL表达式非常相似！

完整的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <!--Vue层 模板-->
    <div id="app">
        {
    {message}}
    </div>
    <!--1.导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/v

最低0.47元/天解锁文章

ZXLzhuzhu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue:MVVM模式、第一个Vue程序、基础语法

VueMVVM概述什么是MVVMMVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软 WPF(用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet，简单点说就是在浏览器上运行的 WPF)的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。
复制链接

扫一扫