Vue | 入门案例

ゞ浴缸里的玫瑰 2022-10-29 10:23 234阅读 0赞

### 文章目录 ###

*  一、MVVM思想
 *  二、Vue入门案例
 *   *  1.初始化项目
     *  2. 声明式渲染+双向绑定
     *  3.事件处理
 *  三、Vue开发插件介绍
 *   *  安装 Vue3 Snippets代码提示
     *  安装vue-devtools方便调试

--------------------

# 一、MVVM思想 #

>  *  M： 即 Model， 模型， 包括数据和一些基本操作。
>  *  V： 即 View， 视图， 页面渲染结果。
>  *  VM： 即 View-Model， 模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前， 开发人员从后端获取需要的数据模型， 然后要通过 DOM 操作 Model 渲染到 View 中。 而后当用户操作视图， 我们还需要通过 DOM 获取 View 中的数据， 然后同步到Model 中。而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来， 开发人员不用再关心 Model和 View 之间是如何互相影响的：

*  只要 Model 发生了改变， View 上自然就会表现出来。
 *  当用户修改了 View， Model 中的数据也会跟着改变。

使用MVVM思想，把开发人员从繁琐的 DOM 操作中解放出来， 把关注点放在如何操作 Model 上。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]

# 二、Vue入门案例 #

## 1.初始化项目 ##

> 使用`npm init -y`命令，初始化项目，代表项目由npm来管理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 1]

> 使用`npm install vue`命令安装vue。

![在这里插入图片描述][20210212213345453.png]

## 2. 声明式渲染+双向绑定 ##

> vue可以实现数据变，页面也跟着变。
> 
>  *  模型的变化会引起视图的变化，视图的变化也会引起模型的变化。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 2]

## 3.事件处理 ##

>  *  el：绑定元素
>  *  data：封装数据
>  *  methods：封装方法

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

# 三、Vue开发插件介绍 #

## 安装 Vue3 Snippets代码提示 ##

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

## 安装vue-devtools方便调试 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]: /images/20221024/af77486d128546dc9d8aebed5c7f9c3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 1]: /images/20221024/2133132f85ed49e79200b9aef93a6147.png
[20210212213345453.png]: /images/20221024/babff08a14054a4a96d11b6585d5aa05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 2]: /images/20221024/4efeee50d2b5471c85bcb583d1cfbc5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 3]: /images/20221024/1a02146a674840e491cc8248939d50a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 4]: /images/20221024/35a9c3a7baf047c694f0e80d74219f9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 5]: /images/20221024/4da0b6e87b4942be9edfae29ad2b9e85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 6]: /images/20221024/3cdbe4b1e7e44617a3975da7a311fb7f.png