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的两种开发方式：

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

Untitled

vue 特性

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

数据驱动视图

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

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

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

双向数据绑定

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

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

MVC和MVVM模型

MVC和MVVM都是一种软件的体系结构

**概念：**MVC是Model – View –Controller的简称，是在前期流行的框架架构模式，比如iOS、前端；

比如 Controller 从 Server 获取数据，然后传递给 Model，Model 将渲染后的结果传递给 Control，最后渲染到 View上

前端的MVC：比如我们就可以把 Html 看作 View，JS看作 Controller，然后通过 JS 从服务器获取数据，交给 Model，最后 Model 将渲染后的结果传递给 Control，最后渲染到 View上

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

**概念：**MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。以下是对关键概念的理解：

Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

它把每个 HTML 页面都拆分成了如下三个部分：

MVVM 的工作原理：

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

Untitled

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

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

结合计数器案例理解：

vue 版本

当前，vue 共有 3 个大版本，其中：

2.x 版本的 vue 是目前企业级项目开发中的主流版本

3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广

1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

vue3.x 和 vue2.x 版本的对比：

vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并废弃了某些 2.x 中的旧功能：

新增的功能例如：

组合式 API、多根节点组件、更好的 TypeScript 支持等

废弃的旧功能如下：

过滤器、不再支持 $o n ，$ off 和 $once 实例方法等

详细的变更信息，请参考官方文档给出的迁移指南：

https://v3.vuejs.org/guide/migration/introduction.html

Vue 的基本使用

Vue 安装与使用

方式一：在页面中通过CDN的方式来引入；

<script src="https://unpkg.com/vue@next"></script>

Case:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script src="https://unpkg.com/vue@next"></script><script>const app = Vue.createApp({template: `<h2>Hello World</h2>`})app.mount("#app")</script>
</body>
</html>

方式二：下载Vue的JavaScript文件，并且自己手动引入；

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script src="./lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({template: `<h1>Hello Vue</h1>`})// 2.挂载appapp.mount("#app")</script></body>
</html>

方式三：通过npm包管理工具安装使用它（webpack笔记里）；

方式四：直接通过Vue CLI创建项目，并且使用它；

Vue2 安装与使用（可选）

基本使用步骤

引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
1. el:指定挂载点
2. data提供数据

官网引包（直接用）：

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

注意：开发版本包含完整的警告和调试模式；生产版本删除了警告，体积更小。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!-- 1-Vue所管理的范围 -->
<div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 2-引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: '#app',// 通过 data 提供数据data: {msg: 'Hello 传智播客',count: 666}})</script></body>
</html>

Vue2网址：https://v2.cn.vuejs.org/