Vue组件基础（上）_自定义组件唯一性-CSDN博客

本文链接：https://blog.csdn.net/qq_44047116/article/details/124346505

学习目标：

什么是单页面应用程序和组件化开发
.vue单文件组件的组成部分
如何注册vue的组件
如何声明组件的props属性
如何在组件中进行样式绑定

学习内容：

单页面应用程序

什么是单页面应用程序

单页面应用程序（英文名：Single Page Application）简称SPA，指的是一个Web网站中只有唯一一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

单页面应用程序的特点

单页面应用程序将所有的功能局限于一个web页面中，仅在该web页面初始化时加载相应的资源（Html、JavaScript和Css）。
一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript动态地交换Html的内容，从而实现页面与用户的交互。

单页面应用程序的优点

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

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

单页面应用程序的缺点

首屏加载慢
- 路由懒加载
- 代码压缩
- CDN加速
- 网络传输压缩
不利于SEO
- SSR服务器端渲染

快速创建vue的SPA项目

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

基于vite创建SPA项目
基于vue-cli创建SPA项目

vite的基本使用

创建vite的项目

按照顺序执行如下的命令，即可基于vite创建vue3.0x的工程化项目：

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

梳理项目的结构

使用vite创建的项目结构如下：
- node_modules：第三方依赖包
- public：公共的静态资源目录
- src：项目的源代码目录
- index.html：SPA单页面应用程序中唯一的html文件
- package.json：项目的包管理配置文件
在src项目源代码目录下，包含如下的文件和文件夹：
- assets：存放项目中的所有的静态资源文件（css、fonts等）
- compents：存放项目中所有的自定义组件
- App.vue：项目的根组件
- index.css：项目的全局样式表文件
- main.js：整个项目的打包入口文件

vite项目的运行流程

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

App.vue用来编写待渲染的模板结构；
index.html中需要预留一个el区域；
main.js把App.vue渲染到了index.html所预留的区域中。

组件化开发思想

什么是组件化开发

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

组件化开发的好处

前端化开发的好处主要体现在以下两个方面：

提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性

vue中的组件化开发

vue是一个完全支持组件化开发的框架。vue中规定组件的后缀名是.vue。

vue组件的构成

vue组件的组成结构

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

template：组件的模板结构
script：组件的JS行为
style：组件的样式

其中，每个组件必须包含template模板结构，而script和style是可选的组成结构。

组件的template节点

vue规定：每个组件对应的模板结构，需要定义到template节点中。
注意：template是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的·DOM元素。在vue2.x中template仅支持单个根节点，而在vue3.x中，可以支持多个根节点

组件的script节点

vue规定：组件内的script节点是可选的，开发者可以在script节点中封装组件的js业务逻辑。script节点的基本结构如下：

<script>
import HelloWorld from './components/HelloWorld.vue'
// 今后，组件相关的data数据、methods方法等，都需要定义到export default 所导出的对象中。
export default {
  name: 'App'
  , components: {
    HelloWorld
  }
  , data() {
    return {
      msg: 'Hello Vue 3.0 + Vite，开始学习'
      , count: 0
    }
  }
  , methods: {
    addCount(){
      this.count++
    }
  }
}
</script>
<style lang="css">
p {
  color: blue;
}
</style>
<style lang="less">
  p {
    span {
      color: black;
      font-size: 30px;
    }
  }
</style>

</script>

name节点：为当前组件定义一个名称，建议每个单词的首字母大写
data节点：vue渲染期间需要用到的数据可以定义到data节点中，data方法中return出去的对象就是当前组件渲染期间需要用到的数据对象
methods节点：组件中的事件处理函数，必须定义到methods节点中
stylej节点：组件内的style节点是可选的，开发者可以在style节点中编写样式梅花当前组件的UI结构。
- 标签上的lang=”css"属性是可选的，它表示所使用的样式语言。默认只支持普通的css语法，可选值还有less、scss等。
- 使用less语法：
  - 运行如下命令安装依赖包，从而提供less语法编译支持
```
npm install less -D
```
  - 在style标签上添加lang = "less"属性即可使用less语法编写组件样式

组件的基本使用

组件的注册

组件之间可以进行相互的引用，引用原则是：先注册后使用。vue中注册组件的方式分为全局注册和局部注册。

全局注册组件
- 在main.js中，引入需要注册的组件，调用单页面应用程序实例的component()方法，第一个参数是组件名，第二个参数是组件对象。
- 注册完成后，直接在其他组件中以标签的形式使用组件。
局部注册组件
- 在script节点中导入组件，然后通过components节点注册为私有子组件
- 注册完成后，直接在此组件中以标签的形式使用注册的组件。
全局注册与局部注册的区别
- 被全局注册的组件，可以在全局任何一个组件内使用
- 被局部注册的组件，只能在当前注册的范围内使用
应用场景：
- 如果某些组件在开发期间使用频率很高，推荐全局注册
- 如果某些组件只在特定的情况下会被用到，推荐局部注册
组件注册时名称的大小写
- 使用kebab-case命名发（俗称短横线命名法，例如 my-swiper）,必须严格按照此法进行使用
- 使用PascalCase命名法（俗称驼峰命名法，如MySwiper），既可以按照此法使用也可以转化为短横线名称进行使用

注意：在实际开发中，推荐使用驼峰命名法为组件注册名称。

组件样式冲突

默认情况下，写在.vue组件中的样式会全局失效，因此容易造成多个组件之间二点样式冲突问题。导致组件之间样式冲突的根本原因是：
- 单页面应用程序中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的
- 每个组件中的样式i，都会影响整个index.html页面中的DOM元素
解决方法：
- 为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域
- 为提高开发效率和开发体验，vue为style节点提供了scoped属性，从而防止组件之间的样式冲突问题。使用scoped属性后，会自动为每个组件分配唯一的自定义属性

/deep/样式穿透

如果给当前组件的style节点添加了scoped属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式生效，可以使用/deep/深度选择器。

/deep/.title {
  color: blue;
}

组件的props

为了提高组件的复用性，在封装vue组件时要遵循以下原则：

组件的DOM结构以及style样式要尽量复用
组件中要展示的数据尽量由组件的使用者提供

为了方便使用者向t组件提供数据，vue组件提供了porps属性

什么是组件的props

props是组件的自定义属性，组件使用者可以通过props把数据传递到组件内部，供子组件内部进行使用，作用：父组件通过props向子组件传递要展示的数据，提高组件复用性

组件props的使用方式

在封装组件时，可以把动态的数据项声明为props自定义属性，自定义属性可以直接在当前模板结构中使用

<template>
  <h3>英雄名称：{{name}}</h3>
  <h3>英雄年龄：{{age}}</h3>

</template>

<script>
export default {
  name: "Hero"
  // 父组件传递给当前组件的数据
  ,props:['name','age']
}
</script>

<style scoped>

</style>

注意：如果父组件传递给子组件未声明的属性，则子组件会忽略该属性，无法使用该属性。

使用v-bind动态绑定props自定义属性

<Hero :name="hero.name" :age="hero.age"></Hero>

props大小写命名即可以使用驼峰命名也可以通过短横线分割命名法

Class与Style绑定

vue允许开发者通过v-bind属性绑定指令，为元素动态绑定class值和行内style样式实现动态操作元素样式。

动态绑定HTML的class类名

三元表达式动态绑定class类名

<template>
<h3 :class="weight?'bold':'thin'">英雄名称：{{name}}</h3>
<h3>英雄年龄：{{age}}</h3>

一个元素动态绑定多个class类名，使用数组的语法格式

  <h3 :class="[weight?'bold':'thin',normal?'normal':'inherit',]">英雄年龄：{{age}}</h3>

使用对象语法绑定HTML的class类，避免模板结构臃肿

  <h3 :class="[classObj.weight?'bold':'thin',classObj.normal?'normal':'inherit',]">英雄年龄：{{age}}</h3>

使用style属性动态绑定内联样式
:style对象语法是js对象，css的属性可以用驼峰命名法或者短横线分割法（需要用引号括起来）命名

<template>
  <h3 :style="{color:myColor,fontSize:mySize+'px','background-color':myBackgroundColor}">绑定类名</h3>
</template>

<script>
export default {
name: "Class"
  ,data(){
    return {
      myColor:"red"
      ,mySize:"30"
      ,myBackgroundColor: "blue"
    }
  }
}
</script>