Vue.js note1（vue介绍&MVC&MVVM&MVP）

小咪咪 2023-02-25 15:26 10阅读 0赞

### 什么是vue ###

今天刚接触到vue，先来简单了解下什么是vue。

Vue.js是一套构建用户界面的渐进式框架，自底向上增量开发 （逐层应用）；同时它也是轻量级、高效率、上手快、简单易学、文档全面而简洁、可组件化的 MVVM 库，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

### Vue.js的产生核心主要为了解决以下3个问题 ###

1.  解决数据绑定问题。
2.  Vue.js主要的目的是为了构建大型单页面应用。
3.  支持组件化。也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。

### vue.js的核心思想 ###

*  数据驱动
 *  组件化

### Vue.js 优势 ###

简洁：HTML 模板 + Vue 实例 + JSON 数据  
轻量：17kb，性能好  
设计思想：视图与数据分离，无需操作DOM  
社区活跃：大量的中文资料和开源案例  
性能好

### MVC ###

*  Module     模型 ：存储数据的 （数据的储存和处理，再传递给视图层相应或者展示）
 *  View       视图 ： 界面（前端的数据展示）
 *  Controller  控制器 ：对数据的接收和触发事件的接收和传递

### MVVM ###

简书：[Vue.js 概述与 MVVM 模式][Vue.js _ MVVM]

虽然vue官网说vue没有完全遵循MVVM模型，但是不得不说vue是基于MVVM框架的，只不过底层修改了些东西，比如双向绑定什么的。MVVM是Model-View-ViewModel 的缩写，是一种设计思想。

MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层）。

*  M：Model 模型层，主要负责业务**数据**相关；
 *  V：View 视图层，负责**视图**相关，细分下来就是html+css层；
 *  VM：ViewModel 视图模型层，是连接V与M的**桥梁**，不严谨来讲也可以看作为控制器MVC的C层，负责监听M或者V的修改，是实现MVVM双向绑定的要点。

因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### MVP ###

模型-视图-展示器(MVP)是 MVC 设计模式的一个衍生模式，它专注于提升展现逻辑。

segmentfault：[MVC、MVP 和 MVVM 对比笔记][MVC_MVP _ MVVM]

简书：[MVC、MVP、MVVM模式的概念与区别][MVC_MVP_MVVM]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

### Vue声明式渲染 ###

Vue.js采用声明式渲染（即允许采用简洁的模板语法来声明式的将数据渲染进 DOM），也就是将模板中的文本数据写进DOM中。

既然有渲染不同方式之分，那是不是说，还有其他的渲染方式呢？有。  
JS采用命令式渲染，比如要获取DOM元素，然后指定这个DOM元素里面插入的内容。（傻瓜式）；而Vue的声明式渲染，比如只需要将变量放在某个DOM元素里，就可以自行将内容展示（自动化）。

这两种方式的不同之处在于：  
命令式渲染 ： 命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行；  
声明式渲染 ： 我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

### Vue数据驱动 ###

数据驱动，随着数据的改变，视图内容自动进行改变。

### Vue渲染方式 ###

vue官网：[模板语法][Link 1]

`{ {}}` — 表达式 （模板语法）

模板语法中可以写入的数据可以是：数字、字符串、计算（不建议写入过多逻辑代码，因为越复杂，越难以维护），进行响应式的展示。

### Vue的一个简单小栗子 ###

先导入Vue.js的资源包，可以直接使用线上的src，也可以用npm下载到当前项目里。

线上资源包：`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`

线下下载使用，用npm管理工具下载：  
（1）在终端进入到该项目的工作目录  
（2）初始化，形成package.json配置文件，一般用 npm init -y ，但也可以使用淘宝镜像cnpm来管理。  
（3）然后下载vue资源包，此处我使用的是 cnpm install --save vue

如果能够顺利下载下来，当前项目目录里面应该有如下图的文件夹：  
![在这里插入图片描述][20200714000107769.png]

然后我们写一个“hello world 级别的”入门小程序：需要导入的vue文件目录为`"./node_modules/vue/dist/vue.js"`

可知，这个小栗子实现的功能是创建几个数据，在view视图层表示出来。  
![在这里插入图片描述][20200714001027120.png]

### 其他 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]

[Vue.js _ MVVM]: https://www.jianshu.com/p/bcad6a5a6b9c
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230209/9bc3ad37991b441a88b88a9f3bb5c42b.png
[MVC_MVP _ MVVM]: https://segmentfault.com/a/1190000018675102
[MVC_MVP_MVVM]: https://www.jianshu.com/p/ff6de219f988
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/3794cfac75094639b839ed5a9580775f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/c2870713df6d4dada5887845b7e5f684.png
[Link 1]: https://cn.vuejs.org/v2/guide/syntax.html
[20200714000107769.png]: /images/20230209/7f4984f4476644d4a3df9a31bb53ed33.png
[20200714001027120.png]: /images/20230209/d1bc8f6c3f134844bee84e0cb71ffcc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/09d372eb61a54905bdd8f2f7ff761445.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/a728cd296e6941939719b56d0f3747bd.png