前言

關(guān)于 vue3 基礎(chǔ)學(xué)習(xí)，前面兩篇博客講了單頁(yè)面應(yīng)用程序、vite 的基本使用 ?。

這期就來(lái)一篇多一點(diǎn)的吧！這期主要內(nèi)容有：組件化開發(fā)思想、vue 組件的構(gòu)成、組件的基本使用、封裝組件的案例。

看完這些，砸門也就詳細(xì)了解什么是組件了。廢話不多說(shuō)，直接上刺刀??！

目錄

前言

組件化開發(fā)思想

1. 什么是組件化開發(fā)

2. 組件化開發(fā)的好處

3. vue 中的組件化開發(fā)

vue 組件的構(gòu)成

1. vue 組件組成結(jié)構(gòu)

2. 組件的 template 節(jié)點(diǎn)

2.1 在 template 中使用指令

2.2 在 template 中定義根節(jié)點(diǎn)

3. 組件的 script 節(jié)點(diǎn)

3.1 script 中的 name 節(jié)點(diǎn)

3.2 script 中的 data 節(jié)點(diǎn)

3.3 script 中的 methods 節(jié)點(diǎn)

4. 組件的 style 節(jié)點(diǎn)

4.1 讓 style 中支持 less 語(yǔ)法

組件的基本使用

1. 組件的注冊(cè)

1.1 注冊(cè)組件的兩種方式

1.2 全局注冊(cè)組件

1.3 使用全局注冊(cè)組件

1.4 局部注冊(cè)組件

1.5 全局注冊(cè)和局部注冊(cè)的區(qū)別

1.6 組件注冊(cè)時(shí)名稱的大小寫

1.7 通過(guò) name 屬性注冊(cè)組件

2. 組件之間的樣式?jīng)_突問(wèn)題

2.1 思考：如何解決組件樣式?jīng)_突的問(wèn)題

2.2 style 節(jié)點(diǎn)的 scoped 屬性

2.3 /deep/ 樣式穿透

3. 組件的 props

3.1 什么是組件的 props

3.2 在組件中聲明 props

3.3 無(wú)法使用未聲明的 props

3.4 動(dòng)態(tài)綁定 props 的值

3.5 props 的大小寫命名

4. Class 與 Style 綁定

4.1 動(dòng)態(tài)綁定 HTML 的 class

4.2 以數(shù)組語(yǔ)法綁定 HTML 的 class

4.3 以對(duì)象語(yǔ)法綁定 HTML 的 class

4.4 以對(duì)象語(yǔ)法綁定內(nèi)聯(lián)的 style

封裝組件的案例

1. 案例效果

2. 用到的知識(shí)點(diǎn)

3. 整體實(shí)現(xiàn)步驟

寫在最后

組件化開發(fā)思想

1. 什么是組件化開發(fā)

組件化開發(fā)指的是：根據(jù)封裝的思想，把頁(yè)面上可重用的部分封裝為組件，從而方便項(xiàng)目的開發(fā)和維護(hù)。例如：ibootstrap - Bootstrap可視化布局系統(tǒng) 所展示的效果，就契合了組件化開發(fā)的思想。用戶可以通過(guò)拖拽組件的方式，快速生成一個(gè)頁(yè)面的布局結(jié)構(gòu)。

2. 組件化開發(fā)的好處

前端組件化開發(fā)的好處主要體現(xiàn)在以下兩方面：

• 提高了前端代碼的復(fù)用性和靈活性

• 提升了開發(fā)效率和后期的可維護(hù)性

3. vue 中的組件化開發(fā)

vue 是一個(gè)完全支持組件化開發(fā)的框架。vue 中規(guī)定組件的后綴名是 .vue。之前接觸到的 App.vue 文件本質(zhì)上就是一個(gè) vue 的組件。

vue 組件的構(gòu)成

1. vue 組件組成結(jié)構(gòu)

每個(gè) .vue 組件都由 3 部分構(gòu)成，分別是：

• template -> 組件的模板結(jié)構(gòu)

• script -> 組件的 JavaScript 行為

• style -> 組件的樣式

其中，每個(gè)組件中必須包含 template 模板結(jié)構(gòu)，而 script 行為和 style 樣式是可選的組成部分。

2. 組件的 template 節(jié)點(diǎn)

vue 規(guī)定：每個(gè)組件對(duì)應(yīng)的模板結(jié)構(gòu)，需要定義到 <template> 節(jié)點(diǎn)中。

<template>
    <!-- 當(dāng)前組件的Dom結(jié)構(gòu)需要定義到 template 標(biāo)簽的內(nèi)部 -->
</template>

注意：<template> 是 vue 提供的容器標(biāo)簽，只起到包裹性質(zhì)的作用，它不會(huì)被渲染為真正的 DOM 元素。

2.1 在 template 中使用指令

在組件的 <template> 節(jié)點(diǎn)中，支持使用前面所學(xué)的指令語(yǔ)法，來(lái)輔助開發(fā)者渲染當(dāng)前組件的 DOM 結(jié)構(gòu)。

代碼示例如下：

<template>
 ?<div class="app-container">
 ? ?<h1>App根組件</h1>
 ? ?<hr>
 ? ?<my-header title="星月" bgcolor="#f40" color="#fff"></my-header>
 ?</div>
</template>

2.2 在 template 中定義根節(jié)點(diǎn)

在 vue 2.x 的版本中，<template> 節(jié)點(diǎn)內(nèi)的 DOM 結(jié)構(gòu)僅支持單個(gè)根節(jié)點(diǎn)：

<template>
 ?<div>
 ? ?<h1>App根組件</h1>
 ? ?<hr>
 ? ?<my-header title="星月" bgcolor="#f40" color="#fff"></my-header>
 ?</div>
</template>

但是，在 vue 3.x 的版本中，<template> 中支持定義多個(gè)根節(jié)點(diǎn)：

<template>
    <h1>App根組件</h1>
 ? ?<my-header title="星月" bgcolor="#f40" color="#fff"></my-header>
</template>

3. 組件的 script 節(jié)點(diǎn)

vue 規(guī)定：組件內(nèi)的 <script> 節(jié)點(diǎn)是可選的，開發(fā)者可以在 <script> 節(jié)點(diǎn)中封裝組件的 JavaScript 業(yè)務(wù)邏輯。

<script>節(jié)點(diǎn)的基本結(jié)構(gòu)如下：

<script>
 ? ?// 導(dǎo)入組件
import MyHeader from './06.MyHeader/MyHeader.vue'
?
export default {
 ? ?// 導(dǎo)出需要定義的方法
 ?name: 'MyApp',
 ?components: {
 ? ?MyHeader,
  },
}
</script>

3.1 script 中的 name 節(jié)點(diǎn)

可以通過(guò) name 節(jié)點(diǎn)為當(dāng)前組件定義一個(gè)名稱：

<script>
    export default {
     ?name: 'MyApp'
    }
</script>

在使用 vue-devtools 進(jìn)行項(xiàng)目調(diào)試的時(shí)候，自定義的組件名稱可以清晰的區(qū)分每個(gè)組件：

3.2 script 中的 data 節(jié)點(diǎn)

vue 組件渲染期間需要用到的數(shù)據(jù)，可以定義在 data 節(jié)點(diǎn)中：

<script>
export default {
 ?// 組件的名稱
 ?name: 'MyApp',
 ? ?// 在vue工程中要用deta（）{ return} ，在普通html中使用vue可以直接data：{}
 ?data() {
 ? ?return {
 ? ? ?username: 'zs',
 ? ? ?count: 0,
 ?  }
  }
}
</script>

組件中的 data 必須是函數(shù)

vue 規(guī)定：組件中的 data 必須是一個(gè)函數(shù)，不能直接指向一個(gè)數(shù)據(jù)對(duì)象。在vue工程中要用 deta（）{ return { } } ，在普通html中使用vue可以直接data：{ }

3.3 script 中的 methods 節(jié)點(diǎn)

組件中的事件處理函數(shù)，必須定義到 methods 節(jié)點(diǎn)中，示例代碼如下：

<script>
export default {
 ?// 組件的名稱
 ?name: 'MyApp',
 ? ?// 在vue工程中要用deta（）{ return} ，在普通html中使用vue可以直接data：{}
 ?data() {
 ? ?return {
 ? ? ?username: 'zs',
 ? ? ?count: 0,
 ?  }
  },
 ? methods: { ?// 處理函數(shù)
 ? ?addCount() {
 ? ? ?this.count++
 ?  },
  },
}
</script>

4. 組件的 style 節(jié)點(diǎn)

vue 規(guī)定：組件內(nèi)的 <style> 節(jié)點(diǎn)是可選的，開發(fā)者可以在 <style> 節(jié)點(diǎn)中編寫樣式美化當(dāng)前組件的 UI 結(jié)構(gòu)。

<style > 節(jié)點(diǎn)的基本結(jié)構(gòu)如下：

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

其中 <style> 標(biāo)簽上的 lang="css" 屬性是可選的，它表示所使用的樣式語(yǔ)言。默認(rèn)只支持普通的 css 語(yǔ)法，可

選值還有 less、scss 等。加上 scope ，可以防止樣式?jīng)_突，不加的話，父組件的樣式會(huì)在子組件上生效。如果加了 scoped，還想讓樣式在在子組件生效，可以給需要生效的樣式加上 /deep/ , 在vue3 中，改成了加 ：deep（ 這里放class，id等名字 ）。

4.1 讓 style 中支持 less 語(yǔ)法

如果希望使用 less 語(yǔ)法編寫組件的 style 樣式，可以按照如下兩個(gè)步驟進(jìn)行配置：

① 運(yùn)行 npm install less -D 命令安裝依賴包，從而提供 less 語(yǔ)法的編譯支持

② 在 <style> 標(biāo)簽上添加 lang="less" 屬性，即可使用 less 語(yǔ)法編寫組件的樣式

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

組件的基本使用

1. 組件的注冊(cè)

組件之間可以進(jìn)行相互的引用，例如：

vue 中組件的引用原則：先注冊(cè)后使用。

1.1 注冊(cè)組件的兩種方式

vue 中注冊(cè)組件的方式分為“全局注冊(cè)”和“局部注冊(cè)”兩種，其中：

• 被全局注冊(cè)的組件，可以在全局任何一個(gè)組件內(nèi)使用

• 被局部注冊(cè)的組件，只能在當(dāng)前注冊(cè)的范圍內(nèi)使用

1.2 全局注冊(cè)組件

注冊(cè)全局組件在 main.js 中配置如下：

// 1. 按需導(dǎo)入 createApp 函數(shù)
import { createApp } from 'vue'
// 2. 導(dǎo)入待渲染的 App.vue 組件
import App from './components/App.vue'

// 1. 導(dǎo)入需要被全局注冊(cè)的組件
import Swiper from './components/01.globalReg/Swiper.vue'
import Test from './components/01.globalReg/Test.vue'

// 3. 調(diào)用 createApp 函數(shù)，創(chuàng)建 SPA 應(yīng)用的實(shí)例
const app = createApp(App)

// 2. 調(diào)用 app.component() 方法全局注冊(cè)組件
app.component(Swiper.name, Swiper)
app.component(Test.name, Test)

// 4. 調(diào)用 mount() 把 App 組件的模板結(jié)構(gòu)，渲染到指定的 el 區(qū)域中
app.mount('#app')

1.3 使用全局注冊(cè)組件

使用 app.component() 方法注冊(cè)的全局組件，直接以標(biāo)簽的形式進(jìn)行使用即可，例如：

<template>
  <h1>這是 <i>App.vue</i> 根組件</h1>
  <hr />

  <my-swiper></my-swiper>
  <MyTest></MyTest>
  <my-test></my-test>
</template>

1.4 局部注冊(cè)組件

局部組件的注冊(cè)和使用：

<template>
  <div>
    <h1>這是 App.vue 組件</h1>
    <hr />

    <my-style></my-style>
  </div>
</template>

<script>
    // 導(dǎo)入組件
import MyStyle from './Style.vue'

export default {
  name: 'MyApp',
  components: {  // 通過(guò) components 節(jié)點(diǎn)注冊(cè)私有組件
      // 注冊(cè)
    MyStyle
  }
}
</script>

1.5 全局注冊(cè)和局部注冊(cè)的區(qū)別

• 被全局注冊(cè)的組件，可以在全局任何一個(gè)組件內(nèi)使用

• 被局部注冊(cè)的組件，只能在當(dāng)前注冊(cè)的范圍內(nèi)使用

應(yīng)用場(chǎng)景：

如果某些組件在開發(fā)期間的使用頻率很高，推薦進(jìn)行全局注冊(cè)；

如果某些組件只在特定的情況下會(huì)被用到，推薦進(jìn)行局部注冊(cè)。

1.6 組件注冊(cè)時(shí)名稱的大小寫

在進(jìn)行組件的注冊(cè)時(shí)，定義組件注冊(cè)名稱的方式有兩種：

① 使用 kebab-case 命名法（俗稱短橫線命名法，例如 my-swiper 和 my-search）

② 使用 PascalCase 命名法（俗稱帕斯卡命名法或大駝峰命名法，例如 MySwiper 和 MySearch）

短橫線命名法的特點(diǎn)：

• 必須嚴(yán)格按照短橫線名稱進(jìn)行使用

帕斯卡命名法的特點(diǎn)：

• 既可以嚴(yán)格按照帕斯卡名稱進(jìn)行使用，又可以轉(zhuǎn)化為短橫線名稱進(jìn)行使用

注意：在實(shí)際開發(fā)中，推薦使用帕斯卡命名法為組件注冊(cè)名稱，因?yàn)樗倪m用性更強(qiáng)。

1.7 通過(guò) name 屬性注冊(cè)組件

在注冊(cè)組件期間，除了可以直接提供組件的注冊(cè)名稱之外，還可以把組件的 name 屬性作為注冊(cè)后組件的名稱，

示例代碼如下：

// 使用組件
<template>
  <h3>Swiper 輪播圖組件</h3>
</template>

<script>
export default {
  name: 'MySwiper',
}
</script>

<!-- 在main.js 中 -->
<!-- 1. 按需導(dǎo)入 createApp 函數(shù) -->
import { createApp } from 'vue'
<!-- 2. 導(dǎo)入待渲染的 App.vue 組件 -->
import App from './components/App.vue'
<!-- 1. 導(dǎo)入需要被全局注冊(cè)的組件 -->
import Swiper from './components/01.globalReg/Swiper.vue'

<!-- 3. 調(diào)用 createApp 函數(shù)，創(chuàng)建 SPA 應(yīng)用的實(shí)例 -->
const app = createApp(App)

<!-- 2. 調(diào)用 app.component() 方法全局注冊(cè)組件 -->
app.component(Swiper.name, Swiper)

<!-- 4. 調(diào)用 mount() 把 App 組件的模板結(jié)構(gòu)，渲染到指定的 el 區(qū)域中 -->
app.mount('#app')

2. 組件之間的樣式?jīng)_突問(wèn)題

默認(rèn)情況下，寫在 .vue 組件中的樣式會(huì)全局生效，因此很容易造成多個(gè)組件之間的樣式?jīng)_突問(wèn)題。導(dǎo)致組件

之間樣式?jīng)_突的根本原因是：

① 單頁(yè)面應(yīng)用程序中，所有組件的 DOM 結(jié)構(gòu)，都是基于唯一的 index.html 頁(yè)面進(jìn)行呈現(xiàn)的

② 每個(gè)組件中的樣式，都會(huì)影響整個(gè) index.html 頁(yè)面中的 DOM 元素

2.1 思考：如何解決組件樣式?jīng)_突的問(wèn)題

為每個(gè)組件分配唯一的自定義屬性，在編寫組件樣式時(shí)，通過(guò)屬性選擇器來(lái)控制樣式的作用域，示例代碼如下：

2.2 style 節(jié)點(diǎn)的 scoped 屬性

為了提高開發(fā)效率和開發(fā)體驗(yàn)，vue 為 style 節(jié)點(diǎn)提供了 scoped 屬性，從而防止組件之間的樣式?jīng)_突問(wèn)題：

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

style節(jié)點(diǎn)的 scoped 屬性，用來(lái)自動(dòng)為每個(gè)組件分配唯一的“自定義屬性"，并自動(dòng)為當(dāng)前組件的 DOM 標(biāo)簽和 style 樣式應(yīng)用這個(gè)自定義屬性，防止組件的樣式?jīng)_突問(wèn)題。

2.3 /deep/ 樣式穿透

如果給當(dāng)前組件的 style 節(jié)點(diǎn)添加了 scoped 屬性，則當(dāng)前組件的樣式對(duì)其子組件是不生效的。如果想讓某些樣

式對(duì)子組件生效，可以使用 /deep/ 深度選擇器。

注意：/deep/ 是 vue2.x 中實(shí)現(xiàn)樣式穿透的方案。在 vue3.x 中推薦使用 :deep() 替代 /deep/。

vue3 中演示如下：

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

3. 組件的 props

為了提高組件的復(fù)用性，在封裝 vue 組件時(shí)需要遵守如下的原則：

• 組件的 DOM 結(jié)構(gòu)、Style 樣式要盡量復(fù)用

• 組件中要展示的數(shù)據(jù)，盡量由組件的使用者提供

為了方便使用者為組件提供要展示的數(shù)據(jù)，vue 組件提供了 props 的概念。

3.1 什么是組件的 props

props 是組件的自定義屬性，組件的使用者可以通過(guò) props 把數(shù)據(jù)傳遞到子組件內(nèi)部，供子組件內(nèi)部進(jìn)行使

用。代碼示例如下：

<template>
  <div class="app-container">
    <h1>App根組件</h1>
    <my-header title="星月" bgcolor="#f40" color="#fff"></my-header>
  </div>
</template>

props 的作用：父組件通過(guò) props 向子組件傳遞要展示的數(shù)據(jù)。

props 的好處：提高了組件的復(fù)用性。

3.2 在組件中聲明 props

在封裝 vue 組件時(shí)，可以把動(dòng)態(tài)的數(shù)據(jù)項(xiàng)聲明為 props 自定義屬性。自定義屬性可以在當(dāng)前組件的模板結(jié)構(gòu)

中被直接使用。示例代碼如下：

<template>
  <div class="header-container" :style="{ backgroundColor: bgcolor, color: color }">
    {{title || 'Header 組件'}}
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  props: ['title', 'bgcolor', 'color']
}
</script>

3.3 無(wú)法使用未聲明的 props

如果父組件給子組件傳遞了未聲明的 props 屬性，則這些屬性會(huì)被忽略，無(wú)法被子組件使用，示例代碼如下：

<template>
  <div class="header-container" :style="{ backgroundColor: bgcolor, color: color }">
    {{title || 'Header 組件'}}
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  props: ['title', 'bgcolor'] // color 屬性沒(méi)有聲明，父組件傳color就沒(méi)有效果
}
</script>

3.4 動(dòng)態(tài)綁定 props 的值

可以使用 v-bind 屬性綁定的形式，為組件動(dòng)態(tài)綁定 props 的值，示例代碼如下：

<!-- 通過(guò) v-bind 屬性綁定，給title賦予了一個(gè)動(dòng)態(tài)的值。值在data中定義。 -->
<my-header :title="name" bgcolor="#f40" color="#fff"></my-header>

<script>
import MyHeader from './06.MyHeader/MyHeader.vue'

export default {
  name: 'MyApp',
  data() {
    return{
      name:'星月'
    }
  },
  components: {
    MyHeader,
  },
}
</script>

3.5 props 的大小寫命名

組件中如果使用“camelCase (駝峰命名法)”聲明了 props 屬性的名稱，則有兩種方式為其綁定屬性的值。

可以綁定原來(lái)的 Myname ,也可以綁定 my-name。

4. Class 與 Style 綁定

在實(shí)際開發(fā)中經(jīng)常會(huì)遇到動(dòng)態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過(guò) v-bind 屬性綁定指令，為元

素動(dòng)態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。

4.1 動(dòng)態(tài)綁定 HTML 的 class

可以通過(guò)三元表達(dá)式，動(dòng)態(tài)的為元素綁定 class 的類名。示例代碼如下：

<hr>
<h2 class="thin" :class="isitalic ? 'italic' : '' ">星月學(xué)前端</h2>
<button @click="isitalic ? isitalic=fasle : isitalic=true">isitalic</button>

<script>
export default {
  data() {
    return{
      isitalic:true
    }
}
</script>

<style lang="less" scoped>
.app-container {
  margin-top: 45px;
  .thin{ // 字體變細(xì)
    font-weight: 200;
  }
  .italic{ // 傾斜字體
    font-style: italic;
  }
}
</style>

4.2 以數(shù)組語(yǔ)法綁定 HTML 的 class

如果元素需要?jiǎng)討B(tài)綁定多個(gè) class 的類名，此時(shí)可以使用數(shù)組的語(yǔ)法格式：

<h3 class="thin" :class="[isItalic ? 'italic' : '',isDelete ? 'delete' : '']">

4.3 以對(duì)象語(yǔ)法綁定 HTML 的 class

使用數(shù)組語(yǔ)法動(dòng)態(tài)綁定 class 會(huì)導(dǎo)致模板結(jié)構(gòu)臃腫的問(wèn)題。此時(shí)可以使用對(duì)象語(yǔ)法進(jìn)行簡(jiǎn)化：

<h3 class="thin" :class="class0bj">MyDeep組件</h3>

data(){
	retrun{
		classObj:{
			italic:true,
			delete:false,
		}
	}
}

4.4 以對(duì)象語(yǔ)法綁定內(nèi)聯(lián)的 style

:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS property 名可以用駝

峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名：

<div :style="{color: active，fontSize: fsize + 'px','background-color ' : bgcolor}">星月前端</div>

<button @click="fsize += 1">字號(hào)+1</button>
<button @click="fsize -- 1">字號(hào)-1</button>

data(){
	return {
		active:'red',
		fsize:30,
		bgcolor:'pink',
	}
}

封裝組件的案例

1. 案例效果

封裝要求：

① 允許用戶自定義 title 標(biāo)題

② 允許用戶自定義 bgcolor 背景色

③ 允許用戶自定義 color 文本顏色

④ MyHeader 組件需要在頁(yè)面頂部進(jìn)行 fixed 固定定位，且 z-index 等于 999

使用示例如下：

<my-header :title="name" bgcolor="#f40" color="#fff"></my-header>

2. 用到的知識(shí)點(diǎn)

• 組件的封裝與注冊(cè)

• props

• 樣式綁定

3. 整體實(shí)現(xiàn)步驟

• 創(chuàng)建 MyHeader 組件

• 渲染 MyHeader 組件的基本結(jié)構(gòu)

• 在 App 組件中注冊(cè)并使用 MyHeader 組件

• 通過(guò) props 為組件傳遞數(shù)據(jù)

app.vue 代碼：

<template>
  <div class="app-container">
    <h1>App根組件</h1>
    <my-header :title="name" bgcolor="#f40" color="#fff"></my-header>
    <hr>
  </div>
</template>

<script>
import MyHeader from './06.MyHeader/MyHeader.vue'

export default {
  name: 'MyApp',
  data() {
    return{
      name:'星月前端',
      isitalic:true
    }
  },
  components: {
    MyHeader,
  },
}
</script>

<style lang="less" scoped>
.app-container {
  margin-top: 45px;
  .thin{ // 字體變細(xì)
    font-weight: 200;
  }
  .italic{ // 傾斜字體
    font-style: italic;
  }
}
</style>

Myheader.vue 代碼：

<template>
  <div class="header-container" :style="{ backgroundColor: bgcolor, color: color }">
    {{title || 'Header 組件'}}
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  props: ['title', 'bgcolor', 'color']
}
</script>

<style lang="less" scoped>
.header-container {
  height: 45px;
  background-color: pink;
  text-align: center;
  line-height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>

總結(jié)

① 能夠說(shuō)出什么是單頁(yè)面應(yīng)用程序及組件化開發(fā)

• SPA、只有一個(gè)頁(yè)面、組件是對(duì) UI 結(jié)構(gòu)的復(fù)用

② 能夠說(shuō)出 .vue 單文件組件的組成部分

• template、script、style（scoped、lang）

③ 能夠知道如何注冊(cè) vue 的組件

• 全局注冊(cè)（app.component）、局部注冊(cè)（components）

④ 能夠知道如何聲明組件的 props 屬性

• props 數(shù)組

④ 能夠知道如何在組件中進(jìn)行樣式綁定

• 動(dòng)態(tài)綁定 class、動(dòng)態(tài)綁定 style

寫在最后

?個(gè)人筆記博客?

星月前端博客https://xingyue.vercel.app/

?原創(chuàng)不易，還希望各位大佬支持一下

?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！

?? 收藏，你的青睞是我努力的方向！

??評(píng)論，你的意見是我進(jìn)步的財(cái)富！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-461698.html

到了這里，關(guān)于vue3---組件基礎(chǔ)(上)保姆級(jí)篇的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！