【Vue.js前端开发实战】第一章

前端开发的基础语言为HTML、CSS和JavaScript，其中，HTML用于搭建页面的内容结构；CSS用于美化页面的显示效果，JavaScript用于处理用户和页面之间的交互行为

DOM：文档对象模型

Vue：前端开发框架

API（Application Programming Interface，应用程序编程接口）

渲染：浏览器把代码（HTML/CSS/JS）转换成用户能看到、能交互的可视化页面的过程

单页Web应用：页面并没有刷新，也没有去服务器要新的 HTML。Vue 只是在当前的这个 HTML 里，显示或隐藏不同的组件实现页面切换。

优点：（1）良好的交互体验（2）良好的前后端分离开发模式（API复用）（3）减轻服务器的压力

AJAX （Asynchronous JavaScript and XML）是一种异步网页开发技术，核心是在不刷新整个页面的前提下，通过 JavaScript 向服务器发送请求、获取数据并更新页面局部内容，是实现网页 “无刷新交互” 的核心手段（比如电商页面的即时搜索、表单实时验证、加载更多数据等场景）。

传统更新的流程大概是这样：用户操作 → 浏览器发送请求 → 服务器返回完整HTML页面 → 浏览器重新加载整个页面（刷新）

AJAX的逻辑是这个样子：用户操作 → JS偷偷发送请求（不刷新页面） → 服务器仅返回需要的少量数据（如JSON） → JS接收数据后，只修改网页中需要更新的部分（局部更新）

局限性：（1）首屏加载慢（2）不利于搜索引擎优化

Vue：用于构建用户界面的渐进式框架，“渐进式”的意思是后期可以逐步添加功能

使用Vue进行项目开发具有以下优势。

Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应
的数据绑定，可支持单向和双向数据绑定。
Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于
团队的协同开发。
Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程
化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。

Vue是基于MVVM（Model，View，ViewModel）模式的框架。

Model是指数据部分，负责业务数据的处理；
View是指视图部分，即用户界面，负责视图处理；
ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

Vue的特性：（1）数据驱动视图（2）双向数据绑定（3）插件（4）指令

（1）数据发生变化，重新渲染

（2）视图数据同步变化

（3）指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。

指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑
定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于
实现页面条件渲染，v-for指令用于实现页面列表渲染等。

v-bind：用于动态绑定 HTML 属性（如src、class、style），数据变化时属性自动更新。

<div id="app"> <!-- 绑定图片地址 --> <img v-bind:src="imgUrl" alt="示例图片"> <!-- 简写形式 :src --> <img :src="imgUrl" alt="示例图片"> </div> <script> const app = Vue.createApp({ data() { return { imgUrl: 'https://example.com/image.jpg' } } }) app.mount('#app') </script>

v-if：根据条件决定元素是否渲染到 DOM 中（条件为假时元素会被移除）。

<div id="app"> <p v-if="isLoggedIn">欢迎回来！</p> <p v-else>请先登录</p> </div> <script> const app = Vue.createApp({ data() { return { isLoggedIn: true } } }) app.mount('#app') </script>

v-for：循环渲染列表数据，常用于展示数组或对象。

<div id="app"> <ul> <li v-for="item in todoList" :key="item.id"> {{ item.text }} </li> </ul> </div> <script> const app = Vue.createApp({ data() { return { todoList: [ { id: 1, text: '学习Vue指令' }, { id: 2, text: '完成作业' }, { id: 3, text: '整理笔记' } ] } } }) app.mount('#app') </script>

（4）Vue支持插件，通过加载插件可以实现更多的功能。常用的插件有Vue Router(路由)、Vuex(状态管理库)、Pinia(轻量级状态管理库)等，这些插件经过简单配置就可以使用。

在Vue项目开发中，经常需要通过各种第三方的包(package)来扩展项目的功能。“包”可以理解为将一系列模块化的代码打包起来，形成一个包，以便于使用。项目中所用到的包称为项目的依赖(dependency)。

这里有两种常见的包管理工具，npm和yarn
npm是Node.js默认的包管理工具，它可以安装、共享、分发代码，还可以管理项目的依赖关系。
yarn是Node.js的包管理工具，它是一个高效、安全和可靠的包管理工具，yarn能够提高包的安装效率，节约安装时间。

npm提供了快速操作包的命令，只需要执行简单的命令就可以很方便地对第三方包进行管理。
npm中常用的命令如下。
npm install包名：可简写为“npm i 包名”，用于为项目安装指定名称的包。如果加上-g选项，则会把包安装为全局包，否则只安装到本项目中。如果省略包名，则npm会根据当前目录下package.json文件中保存的依赖信息为项目安装所有的包。
npm uninstall包名：用于卸载指定名称的包。
npm update包名：用于更新指定名称的包。

yarn 是专为解决 npm 在依赖安装速度、版本一致性等方面的痛点。 yarn install:可简写为yarn,用于为项目安装所有包。如果提供了-g选项，则会把包安装为全局包，否则只安装到本项目中。
yarn remove包名：用于卸载指定名称的包。
yarn up 包名：用于更新指定名称的包。
yarn add 包名：用于添加指定名称的包。

区别：

（1）使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。
（2）npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后，才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。
（3）npm的输出信息比较冗长，在执行npm install命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。

Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换(Hot Module Replacement，HMR)，可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。

Vite提供了两种创建项目的命令

1.手动创建项目的命令

#使用npm create命令创建项目
npm create vite@latest
#使用yarn create命令创建项目
yarn create vite

2.通过模板自动创建项目的命令

#使用npm6或更低版本创建项目
npm create vite@latest<项目名称>-template<模板名称>
#使用npm7或更高版本创建项目
npm create vite@latest<项目名称>--template<模板名称>
#使用yarn create命令创建项目
yarn create vite<项目名称>-template<模板名称>