Vue 組件通常由三大組成部分構(gòu)成：模板（Template）、腳本（Script）、樣式（Style）

模板部分是組件的 HTML 結(jié)構(gòu)，它定義了組件的外觀和布局。Vue 使用基于 HTML 的模板語法來聲明組件的模板，可以插入動(dòng)態(tài)數(shù)據(jù)、綁定事件等。腳本部分包含了組件的 JavaScript 代碼，用于定義組件的行為邏輯。在腳本中，可以定義組件的數(shù)據(jù)（data）、計(jì)算屬性（computed）、方法（methods）等。樣式部分定義了組件的樣式，用于控制組件的外觀和樣式。通常使用 CSS 或預(yù)處理器（如 Sass 或 Less）編寫樣式，可以使用作用域樣式（scoped styles）確保樣式僅應(yīng)用于當(dāng)前組件。

結(jié)構(gòu)<template>

只能有一個(gè)根元素

樣式<style>

全局樣式（默認(rèn)）

影響所有組件

局部樣式

給組件加上scoped樣式，讓樣式只作用于當(dāng)前組件

scoped原理

• ? 給當(dāng)前組件模板的所有元素，都會(huì)添加上一個(gè)自定義屬性，即data-v-hash值

? ???????data-v-5f6a9d56?

• ?css選擇器都被添加上 [data-v-hash值] 的屬性選擇器

? ????????div[data-v-5f6a9d56]

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
div{border: 3px solid blue;margin: 30px;
}
</style>

BaseTwo.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
div{border: 3px solid blue;margin: 30px;
}
</style>

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

邏輯<script>

el根實(shí)例獨(dú)有，data是一個(gè)函數(shù)，其他配置項(xiàng)一致

data函數(shù)

一個(gè)組件的data選項(xiàng)必須是一個(gè)函數(shù)。每次創(chuàng)建新的組件實(shí)例，都會(huì)執(zhí)行一次data函數(shù)，得到一個(gè)新對(duì)象