Vue：介绍与体验

Vue 介绍与体验

vue 简介

Sum：

概念：Vue是一套用于构建 用户界面 的 渐进式前端框架。

• 理解与表达：

  从两个角度解读，

  构建用户界面：通过指令、数据驱动视图、事件绑定等方式构建用户界面

  前端框架：提供一整套构建用户界面的解决方案，包括vue、vue-router、vuex、组件库等

  渐进式概念：可以先针对项目某个模块先用Vue开发，然后再逐步用Vue去开发更多模块。

vue 特性：主要体现在两方面：① 数据驱动视图 ② 双向数据绑定

vue 模型：MVVM

• 理解与表达：

  vue的特性是数据驱动视图和双向数据绑定，其中MVVM是vue实现二者的核心原理，它把每个HTML页面都拆分成了View、ViewModel、Model三个部分，其中View 表示当前页面所渲染的 DOM 结构。Model 表示当前页面渲染时所依赖的数据源。ViewModel 表示 vue 的实例，它是 MVVM 的核心。

  ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

  

  当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

  当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

• 理解与表达：

---

---

---

vue 概念

官方概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架。

关键词1：构建用户界面

概念：基于数据动态渲染页面

关键词2：框架

概念：一整套的项目解决方案，提升开发效率

Vue提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：

• vue（核心库）
• vue-router（路由方案）
• vuex（状态管理方案）
• vue 组件库（快速搭建页面 UI 效果的方案）

以及辅助 vue 项目开发的一系列工具：

• vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）
• vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
• vue-devtools（浏览器插件：辅助调试的工具）
• vetur（vscode 插件：提供语法高亮和智能提示）

提到框架，不得不提一下库。

• 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
• 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

---

关键词：渐进式

概念：可以先针对项目某个模块先用Vue开发，然后再逐步用Vue去开发更多模块。

Vue的两种开发方式：

1. Vue核心包开发场景：局部模块改造
2. Vue核心包&Vue插件&工程化场景：整站开发

---

---

vue 特性

vue 框架的特性，主要体现在两方面：① 数据驱动视图 ② 双向数据绑定

数据驱动视图

页面中如果使用 Vue，Vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

---

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：