0
点赞
收藏
分享

微信扫一扫

Vue----组件基础

就是耍帅 2022-04-20 阅读 82

Vue----组件基础


1 单页面应用程序

1.1 什么是单页面应用程序

单页面应用程序(英文名:Single Page Application)简称 SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。

1.2 单页面应用程序的特点

1.3 单页面应用程序的优缺点

1.3.1 单页面应用程序的优点

SPA 单页面应用程序最显著的 3 个优点如下:

② 良好的前后端工作分离模式

③ 减轻服务器的压力

1.3.2 单页面应用程序的缺点

任何一种技术都有自己的局限性,对于 SPA 单页面应用程序来说,主要的缺点有如下两个:

② 不利于 SEO

1.4 如何快速创建 vue 的 SPA 项目

vue 官方提供了两种快速创建工程化的 SPA 项目的方式:

vitevue-cli
支持的 vue 版本仅支持 vue3.x支持 3.x 和 2.x
是否基于 webpack
运行速度较慢
功能完整度小而巧(逐渐完善)大而全
是否建议在企业级开发中使用目前不建议建议在企业级开发中使用

2 vite 的基本使用

2.1 创建 vite 的项目

按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目:

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev

2.1.1 在对应的文件夹下打开命令窗口

请添加图片描述

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 创建的项目结构如下:
请添加图片描述
其中:

在 src 这个项目源代码目录之下,包含了如下的文件和文件夹:
请添加图片描述
其中:

2.3 vite 项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中:

2.3.1 在 App.vue 中编写模板结构

清空 App.vue 的默认内容,并书写如下的模板结构:

<template>
  <h1>App 组件</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

2.3.2 在 index.html 中预留 el 区域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
	<!-- index.html 中预留 el 区域 -->
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

2.3.3 在 main.js 中进行渲染

按照 vue 3.x 的标准用法,把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中:

// 1.导入创建Vue单页面应用程序实例对象的函数
import { createApp } from 'vue'
// 2.导入对应需要渲染的App组件
import App from './App.vue'

// 3.创建单页面应用程序实例对象
const app = createApp(App)

// 4.调用mount()方法把App组件渲染到index.html中指定的el区域
app.mount( '#app' )

注意:
在Vue3可以有多个根节点,不用在最外包一层div。

3 组件化开发思想

3.1 什么是组件化开发

组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。

例如:http://www.ibootstrap.cn/ 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的
方式,快速生成一个页面的布局结构。

请添加图片描述

3.2 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面:

3.3 vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

4 vue 组件的构成

4.1 vue 组件组成结构

每个 .vue 组件都由 3 部分构成,分别是:

其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。

4.2 组件的 template 节点

vue 规定:每个组件对应的模板结构,需要定义到<template> 节点中。

<template>
  <!-- 当前组件的 DOM 要定义到 template 标签内 -->
</template>

注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。

4.2.1 在 template 中使用指令

在组件的 <template>节点中,支持使用前面所学的指令语法,来辅助开发者渲染当前组件的 DOM 结构。

4.2.2 在 template 中定义根节点

在 vue 2.x 的版本中,<template>节点内的 DOM 结构仅支持单个根节点。

<template>
  <div>
	<!-- 当前组件的 DOM 要定义到 template 标签内的 div 标签内 -->
  </div>
</template>

在 vue 3.x 的版本中,<template> 中支持定义多个根节点:

<template>
	<!-- 当前组件的 DOM 要定义到 template 标签内 -->
  	<div>
		<h1></h1>
 	</div>
 	<h2></h2>
</template>

4.3 组件的 script 节点

vue 规定:组件内的 <script>节点是可选的,开发者可以在 <script>节点中封装组件的 JavaScript 业务逻辑。

<script >节点的基本结构如下:

<script>
//今后,组件相关的 data数据、methods方法等,
//都需要定义到export default所导出的对象中。
export default {}
</script>

4.3.1 script 中的 name 节点

可以通过 name 节点为当前组件定义一个名称:

<script>
export default {
	//name属性指向的是当前组件的名称(建议:每个单词的首字母大写>
	name: 'My![请添加图片描述](https://img-blog.csdnimg.cn/b92cb4ad79c54fb0b69d26b355ee2fb6.png)
App'
}
</script>

在使用 vue-devtools 进行项目调试的时候,自定义的组件名称可以清晰的区分每个组件:

举报

相关推荐

0 条评论