Vue | 入门案例

---

一、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 上。

二、Vue入门案例

1.初始化项目

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

使用npm install vue命令安装vue。

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

vue可以实现数据变，页面也跟着变。

• 模型的变化会引起视图的变化，视图的变化也会引起模型的变化。

3.事件处理

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

三、Vue开发插件介绍

安装 Vue3 Snippets代码提示

安装vue-devtools方便调试