Vue篇— 认识Vue和MVVM设计模式以及第一个Vue程序，一篇文章帮你彻底搞清！

最新推荐文章于 2024-04-23 12:25:54 发布

Be explorer

最新推荐文章于 2024-04-23 12:25:54 发布

阅读量446

点赞数 7

分类专栏： Vue 文章标签： vue.js 设计模式前端 javascript

本文链接：https://blog.csdn.net/CNpeaceful/article/details/134641428

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

认识Vue

一、认识
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其他大型的框架不同的是Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，是MVVM模式的实现，方便与第三方库或者既有项目整合。

二、为什么要使用Vue.js?
1、轻量级，体积小是一个重要的指标。Vue.js压缩后只有20多kb(而Angular压缩后56kb+,React压缩后44kb+)
2、移动优先。更适合移动端，比如移动端的Touch事件
3、易于上手，学习快，注释文档多
4、吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如：计算属性
5、开源！社区活跃度高！

MVVM

一、了解什么是MVVM
MVVM(Model-View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。由John Gossman于2005年在他的博客发布。
MVVM源自于经典的MVC模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更易管理和使用，他的作用如下：
1、ViewModel层向上与视图层进行双向数据绑定
2、ViewModel层向下与Model层通过接口请求进行数据交互

MVVM相当成熟，当下流行的MVVM框架有Vue.js和AngularJS等

二、为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的就是分离视图层（View）和模型层（Model），优势在于：
1、低耦合
视图层（View）可以独立于Model变化和修改，一个 ViewModel可以绑定到不同的View上，当View发生变化的时候Model可以不变，当Model发生变化的时候View也可以不变
2、可复用
可以把一些视图逻辑放到一个ViewModel中，让很多的View重用这段试图逻辑
3、独立开发
开发人员可以专注于业务逻辑和数据的开发（ViewModel），页面设计人员可以专注于页面设计
4、可测试
界面测试素来是比较难测试的，而现在测试可以针对ViewModel来写

第一个Vue程序

一、首先在IDEA中安装插件

二、新建一个html导入Vue.js

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

三、编写前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个Vue程序</title>

</head>
<body>
<div id="app">
    {{message}}

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let vm = new Vue({
        //el表示元素，后面绑定想要操作的元素
        el: "#app",
        //data表示Model层数据，编写div中想要显示的数据，上面的div直接通过{{message}}就可以取到message中的值
        data: {
            message: "hello,Vue!"
        }
    });

</script>
</body>
</html>

四、前端测试
1、当前页面信息是hello vue

2、当我在前端控制台修改这个message，前端信息会立即随着修改

至此，对于Vue的认识和对MVVM模型的理解你已经掌握，后续会继续更新关于前端Vue等技术栈，敬请期待！

Be explorer

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue篇— 认识Vue和MVVM设计模式以及第一个Vue程序，一篇文章帮你彻底搞清！

视图层（View）可以独立于Model变化和修改，一个 ViewModel可以绑定到不同的View上，当View发生变化的时候Model可以不变，当Model发生变化的时候View也可以不变。至此，对于Vue的认识和对MVVM模型的理解你已经掌握，后续会继续更新关于前端Vue等技术栈，敬请期待！4、吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如：计算属性。Vue的核心库只关注视图层，是MVVM模式的实现，方便与第三方库或者既有项目整合。
复制链接

扫一扫