Vue----组件基础
1 单页面应用程序
1.1 什么是单页面应用程序
单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。
1.2 单页面应用程序的特点
1.单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。
2.一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。
1.3 单页面应用程序的优缺点
1.3.1 单页面应用程序的优点
SPA 单页面应用程序最显著的 3 个优点如下：
① 良好的交互体验
单页应用的内容的改变不需要重新加载整个页面
获取数据也是通过 Ajax 异步获取
没有页面之间的跳转，不会出现“白屏现象”② 良好的前后端工作分离模式
后端专注于提供 API 接口，更易实现 API 接口的复用
前端专注于页面的渲染，更利于前端工程化的发展③ 减轻服务器的压力
服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍
1.3.2 单页面应用程序的缺点
任何一种技术都有自己的局限性，对于 SPA 单页面应用程序来说，主要的缺点有如下两个：
① 首屏加载慢
路由懒加载
代码压缩
CDN 加速
网络传输压缩② 不利于 SEO
SSR 服务器端渲染
vue__SPA__38">1.4 如何快速创建 vue 的 SPA 项目
vue 官方提供了两种快速创建工程化的 SPA 项目的方式：
| vite | vue-cli | |
|---|---|---|
| 支持的 vue 版本 | 仅支持 vue3.x | 支持 3.x 和 2.x |
| 是否基于 webpack | 否 | 是 |
| 运行速度 | 快 | 较慢 |
| 功能完整度 | 小而巧（逐渐完善） | 大而全 |
| 是否建议在企业级开发中使用 | 目前不建议 | 建议在企业级开发中使用 |
vite__51">2 vite 的基本使用
vite__52">2.1 创建 vite 的项目
按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目：
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
2.1.1 在对应的文件夹下打开命令窗口
viteapp__73">2.1.2 运行 npm init vite-app 项目名称
2.1.3 运行 cd 项目名称
2.1.4 运行 npm install
2.1.5 运行
2.1.6 打开网站
2.2 梳理项目的结构
使用 vite 创建的项目结构如下：
其中：
node_modules 目录用来存放第三方依赖包
public 是公共的静态资源目录
src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）
.gitignore 是 Git 的忽略文件
index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
package.json 是项目的包管理配置文件
在 src 这个项目源代码目录之下，包含了如下的文件和文件夹：
其中：
assets 目录用来存放项目中所有的静态资源文件（css、fonts等）
components 目录用来存放项目中所有的自定义组件
App.vue 是项目的根组件
index.css 是项目的全局样式表文件
main.js 是整个项目的打包入口文件
vite__105">2.3 vite 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
vue__113">2.3.1 在 App.vue 中编写模板结构
清空 App.vue 的默认内容，并书写如下的模板结构：
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>h1span><span class="token punctuation">>span>span>App 组件<span class="token tag"><span class="token tag"><span class="token punctuation"></span>h1span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan><span class="token punctuation">>span>span><span class="token script"><span class="token language-javascript">
<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token punctuation">{span>
<span class="token literal-property property">namespan><span class="token operator">:span> <span class="token string">'App'span>
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>stylespan><span class="token punctuation">>span>span><span class="token style"><span class="token language-css">
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>stylespan><span class="token punctuation">>span>span>
2.3.2 在 index.html 中预留 el 区域
<span class="token doctype"><span class="token punctuation"><!span><span class="token doctype-tag">DOCTYPEspan> <span class="token name">htmlspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>htmlspan> <span class="token attr-name">langspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>en<span class="token punctuation">"span>span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>headspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>metaspan> <span class="token attr-name">charsetspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>UTF-8<span class="token punctuation">"span>span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>linkspan> <span class="token attr-name">relspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>icon<span class="token punctuation">"span>span> <span class="token attr-name">hrefspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>/favicon.ico<span class="token punctuation">"span>span> <span class="token punctuation">/>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>metaspan> <span class="token attr-name">namespan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>viewport<span class="token punctuation">"span>span> <span class="token attr-name">contentspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>width=device-width, initial-scale=1.0<span class="token punctuation">"span>span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>titlespan><span class="token punctuation">>span>span>Vite App<span class="token tag"><span class="token tag"><span class="token punctuation"></span>titlespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>headspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>bodyspan><span class="token punctuation">>span>span>
<span class="token comment"><!-- index.html 中预留 el 区域 -->span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>divspan> <span class="token attr-name">idspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>app<span class="token punctuation">"span>span><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>divspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan> <span class="token attr-name">typespan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>module<span class="token punctuation">"span>span> <span class="token attr-name">srcspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>/src/main.js<span class="token punctuation">"span>span><span class="token punctuation">>span>span><span class="token script">span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>bodyspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>htmlspan><span class="token punctuation">>span>span>
2.3.3 在 main.js 中进行渲染
按照 vue 3.x 的标准用法，把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中：
<span class="token comment">// 1.导入创建Vue单页面应用程序实例对象的函数span>
<span class="token keyword">importspan> <span class="token punctuation">{span> createApp <span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'vue'span>
<span class="token comment">// 2.导入对应需要渲染的App组件span>
<span class="token keyword">importspan> App <span class="token keyword">fromspan> <span class="token string">'./App.vue'span>
<span class="token comment">// 3.创建单页面应用程序实例对象span>
<span class="token keyword">constspan> app <span class="token operator">=span> <span class="token function">createAppspan><span class="token punctuation">(span>App<span class="token punctuation">)span>
<span class="token comment">// 4.调用mount()方法把App组件渲染到index.html中指定的el区域span>
app<span class="token punctuation">.span><span class="token function">mountspan><span class="token punctuation">(span> <span class="token string">'#app'span> <span class="token punctuation">)span>
注意：
在Vue3可以有多个根节点，不用在最外包一层div。
3 组件化开发思想
3.1 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
例如：http://www.ibootstrap.cn/ 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的
方式，快速生成一个页面的布局结构。
3.2 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面：
提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性
vue__183">3.3 vue 中的组件化开发
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
vue__187">4 vue 组件的构成
vue__188">4.1 vue 组件组成结构
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
4.2 组件的 template 节点
vue 规定：每个组件对应的模板结构，需要定义到<template> 节点中。
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token comment"><!-- 当前组件的 DOM 要定义到 template 标签内 -->span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。
4.2.1 在 template 中使用指令
在组件的 <template>节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。
4.2.2 在 template 中定义根节点
在 vue 2.x 的版本中，<template>节点内的 DOM 结构仅支持单个根节点。
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>divspan><span class="token punctuation">>span>span>
<span class="token comment"><!-- 当前组件的 DOM 要定义到 template 标签内的 div 标签内 -->span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>divspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
在 vue 3.x 的版本中，<template> 中支持定义多个根节点：
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token comment"><!-- 当前组件的 DOM 要定义到 template 标签内 -->span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>divspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>h1span><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>h1span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>divspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>h2span><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>h2span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
4.3 组件的 script 节点
vue 规定：组件内的 <script>节点是可选的，开发者可以在 <script>节点中封装组件的 JavaScript 业务逻辑。
<script >节点的基本结构如下：
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan><span class="token punctuation">>span>span><span class="token script"><span class="token language-javascript">
<span class="token comment">//今后，组件相关的 data数据、methods方法等，span>
<span class="token comment">//都需要定义到export default所导出的对象中。span>
<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token punctuation">{span><span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
4.3.1 script 中的 name 节点
可以通过 name 节点为当前组件定义一个名称：
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan><span class="token punctuation">>span>span><span class="token script"><span class="token language-javascript">
<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token punctuation">{span>
<span class="token comment">//name属性指向的是当前组件的名称（建议:每个单词的首字母大写>span>
<span class="token literal-property property">namespan><span class="token operator">:span> 'My<span class="token operator">!span><span class="token punctuation">[span>请添加图片描述<span class="token punctuation">]span><span class="token punctuation">(span>https<span class="token operator">:span><span class="token operator">/span><span class="token operator">/span>img<span class="token operator">-span>blog<span class="token punctuation">.span>csdnimg<span class="token punctuation">.span>cn<span class="token operator">/span>b92cb4ad79c54fb0b69d26b355ee2fb6<span class="token punctuation">.span>png<span class="token punctuation">)span>
App'
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：
4.3.2 script 中的 data 节点
vue 组件渲染期间需要用到的数据，可以定义在 data 节点中。
vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>h1span><span class="token punctuation">>span>span>App 组件<span class="token tag"><span class="token tag"><span class="token punctuation"></span>h1span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan><span class="token punctuation">>span>span><span class="token script"><span class="token language-javascript">
<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token punctuation">{span>
<span class="token literal-property property">namespan><span class="token operator">:span> <span class="token string">'App'span><span class="token punctuation">,span>
<span class="token function">dataspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
<span class="token keyword">returnspan> <span class="token punctuation">{span>
<span class="token literal-property property">usernamespan><span class="token operator">:span> <span class="token string">'zs'span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>stylespan><span class="token punctuation">>span>span><span class="token style"><span class="token language-css">
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>stylespan><span class="token punctuation">>span>span>`
4.3.3 script 中的 methods 节点
组件中的事件处理函数，必须定义到 methods 节点中。
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>h1span><span class="token punctuation">>span>span>App 组件<span class="token tag"><span class="token tag"><span class="token punctuation"></span>h1span><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>templatespan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>scriptspan><span class="token punctuation">>span>span><span class="token script"><span class="token language-javascript">
<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token punctuation">{span>
<span class="token literal-property property">namespan><span class="token operator">:span> <span class="token string">'App'span><span class="token punctuation">,span>
<span class="token function">dataspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
<span class="token keyword">returnspan> <span class="token punctuation">{span>
<span class="token literal-property property">usernamespan><span class="token operator">:span> <span class="token string">'zs'span>
<span class="token punctuation">}span>
<span class="token punctuation">}span><span class="token punctuation">,span>
<span class="token literal-property property">methodsspan><span class="token operator">:span> <span class="token punctuation">{span>
<span class="token function">sayHellospan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
console<span class="token punctuation">.span><span class="token function">logspan><span class="token punctuation">(span> <span class="token string">'Hello'span> <span class="token punctuation">)span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>scriptspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>stylespan><span class="token punctuation">>span>span><span class="token style"><span class="token language-css">
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>stylespan><span class="token punctuation">>span>span>
4.4 组件的 style 节点
vue 规定：组件内的 <style>节点是可选的，开发者可以在 <style>节点中编写样式美化当前组件的 UI 结构。<script > 节点的基本结构如下：
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>stylespan> <span class="token attr-name">langspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>css<span class="token punctuation">"span>span><span class="token punctuation">>span>span><span class="token style"><span class="token language-css">
<span class="token selector">h1span> <span class="token punctuation">{span>
<span class="token property">colorspan><span class="token punctuation">:span> aquamarine<span class="token punctuation">;span>
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>stylespan><span class="token punctuation">>span>span>
其中
4.4.1 让 style 中支持 less 语法
如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：
① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持
npm install less -D② 在
<style>标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>stylespan> <span class="token attr-name">langspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>less<span class="token punctuation">"span>span> <span class="token attr-name">scopedspan><span class="token punctuation">>span>span><span class="token style"><span class="token language-css">
<span class="token selector">h1span> <span class="token punctuation">{span>
<span class="token property">colorspan><span class="token punctuation">:span> aquamarine<span class="token punctuation">;span>
<span class="token selector">spanspan> <span class="token punctuation">{span>
<span class="token property">colorspan><span class="token punctuation">:span> aqua<span class="token punctuation">;span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>
span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>stylespan><span class="token punctuation">>span>span>
其中，scoped 表示 style 中的样式只在该组件内生效。
