Vue3基础（2）——组件基础

番大茄子

已于 2022-04-09 12:45:58 修改

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript

于 2022-04-07 17:17:16 首次发布

本文链接：https://blog.csdn.net/SongD1114/article/details/124004735

版权

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币，点赞，收藏呦，历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！https://www.bilibili.com/video/BV1zq4y1p7ga?p=327&spm_id_from=333.1007.top_right_bar_window_history.content.click

1. 单页面应用程序

单页面应用程序（SPA）是指一个Web网站中只有唯一的一个HTML页面，所有功能和交互在这个页面内完成。

1. SPA的优点：

良好的交互体验：单页面内容的改变不需要重新加载整个页面；获取数据是通过Ajax异步获取；没有页面之间的跳转，不会出现白屏现象。
良好的前后端工作分离模式：后端专注于提供API接口，更易实现API接口的复用；前端专注于页面的渲染，更利于前端工程化的发展。
减轻服务器压力：服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力提高几倍。

2. SPA的缺点：

首屏加载慢：（解决方法）路由懒加载、代码压缩、CDN加速、网络传输压缩
不利于SEO：（解决方法）SSR服务端渲染

3. vue官方提供的快速创建工程化SPA项目的方式：

vite（仅支持vue3.0，小而巧，速度快）
vue-cli（支持vue2.0和3.0，基于webpack，适用于企业项目开发）

2. Vite的基本使用

1. 创建vite项目

# 创建和初始化项目
npm init vite-app 项目名称
cd 项目名称
npm i

# 运行项目
npm run dev

2. 项目的结构

3. vite项目的运行流程

工程化项目中，vue通过main.js把App.vue渲染到index.html的指定区域中。

App.vue用来编写带渲染的模板结构，所有模板结构需要用<template>标签包裹
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中

App.vue：

<template>
  <h1>这是<i>App.vue</i>根组件</h1>
  <h3>{
  {username}}</h3>
  <hr>
  <p>count值是：{
  {count}}</p>
  <button @click="addCount">+1</button>
  <hr>
  <my-swiper></my-swiper>
  <my-test></my-test>
  <my-search></my-search>
</template>

<script>
import Search from './components/privateReg/Search.vue'

//今后，组件相关的data数据、methods方法等，都需要定义到export default导出的对象中
export default {
  // 当前组件的名称（建议：每个单词首字母大写）
  name: 'MyApp',
  // 组件的数据
  data(){
    return{
      username:'zs',
      count:0
    }
  },
  // 组件的处理函数
  methods:{
    addCount(){
      this.count++
    }
  },
  // 局部注册组件
  components:{
    'my-search':Search
  }
}
</script>

<style lang="less" scoped>
h1 {
  color: red;
  i {
    color:blue;
  }
}
</style>

main.js：

// 1、从vue中按需导入createApp函数
//createApp函数的作用：创建vue的“单页面应用程序实例”
import { createApp } from 'vue'
// 2、导入待渲染的App组件
import App from './App.vue'
import './index.css'

// 5、导入Swiper和Test两个全局注册组件
import Swiper from './components/globalReg/Swiper.vue'
import Test from './components/globalReg/Test.vue'

// 3、调用createApp()函数，返回值是“单页面应用程序的实例”
// 同时把App组件作为参数传给createApp函数，表示要把App渲染到index.html页面上
const app=createApp(App)

// 6、调用app.component()方法全局注册组件
app.component('my-swiper',Swiper)
app.component('my-test',Test)

// 4、调用“单页面应用程序的实例”的mount方法，用来指定vue实际要控制的区域
app.mount('#app')

index.html：

<!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>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

3. 组件化开发

根据封装的思想，把页面上可重用的部分封装为组件，从而提高代码复用性，方便项目的开发维护。

vue完全支持组件化开发，规定组件的后缀名为.vue。

1. vue组件构成

每个.vue 组件都由3个部分构成，分别是：

template：组件的模板结构
script：组件的Javscript行为
style：组件的样式
（其中，每个组件必须包含template模板结构，其他组成部分可选。）

（1）组件的template节点

<template>只是一个包裹性质的容器，不会真正被渲染为DOM元素。

<template>节点中支持使用vue指令语法，辅助开发者渲染当前组件的DOM结构。
注意：vue3.x的版本中，<template>中支持定义多个根节点。

（2）组件的script节点

name节点：可以通过name节点为当前组件定义一个名称，在使用vue-devtools进行调试时，自定义的组件名称可以清晰的区分每个组件。
data节点：vue组件渲染期间需要用到的数据，可以定义在data节点中。
methods节点：组件中的事件处理函数必须定义在methods节点中。

（3）组件的style节点

<style>标签上的lang="css"属性是可选的，它表示所使用的的样式语言，默认只支持普通css语法，还可以选择less、scss等。
让style中支持less语法：（2）运行命令安装依赖包（2）在<style>标签加上lang="less"属性

npm install less -D

2. 组件的注册

组件之间可以相互引用，引用原则是：先注册后使用。

（1）注册组件的两种方式：

全局注册组件：被全局注册的组件，可以在全局任何一个组件内使用。
- 在main.js中，导入组件，并使用app.component()方法注册全局组件，直接以标签的形式进行使用即可。
局部注册组件：被局部注册的组件，只能在当前注册的范围内使用。
- 在需要组件的.vue模块中，导入组件，并通过components节点，为当前组件注册私有子组件，之后直接以标签的形式进行使用即可。

（2）组件注册时定义组件名称的两种方式：