vue組件的基本結(jié)構(gòu)由template、script和style三部分組成，其中template和script是核心。一、template作為組件的“骨架”，使用html模板和vue語法綁定數(shù)據(jù)與事件；二、script作為組件的“大腦”，定義數(shù)據(jù)、方法和生命周期鉤子；三、vue將template編譯為渲染函數(shù)，自動響應(yīng)script中數(shù)據(jù)變化并更新dom；四、細(xì)節(jié)上需注意template只能有一個根元素，變量名需一致，vue 3可使用簡化語法。
Vue組件的基本結(jié)構(gòu)主要由三部分組成：template、script 和 style。這三部分分別負(fù)責(zé)組件的視圖結(jié)構(gòu)、邏輯行為和樣式表現(xiàn)。其中，template 和 script 是最核心的部分，它們一起決定了組件如何渲染和交互。
簡單來說，template 負(fù)責(zé)寫頁面長什么樣，而 script 負(fù)責(zé)告訴它這些內(nèi)容怎么動起來。
一、template 是組件的“骨架”
在 Vue 單文件組件中， 標(biāo)簽里寫的其實是 HTML 模板，只不過可以使用 Vue 的模板語法來綁定數(shù)據(jù)、響應(yīng)事件等。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
比如你可以這樣寫：
<template> <div> <h1>{{ title }}</h1> <button @click="onClick">點我</button> </div> </template>
這段代碼中的 {{ title }} 和 @click 都不是原生 HTML 的寫法，而是 Vue 提供的指令和插值語法。它們能正常工作，是因為 script 中提供了對應(yīng)的數(shù)據(jù)和方法。
二、script 是組件的“大腦”
<script> 部分定義了組件的行為和數(shù)據(jù)來源。你可以在里面定義 data、methods、computed、生命周期鉤子等。</script>
例如：
<script> export default { data() { return { title: 'Hello Vue' } }, methods: { onClick() { this.title = '你點了按鈕！' } } } </script>
這部分定義了 title 數(shù)據(jù)和 onClick 方法，然后 template 就可以使用這些變量和方法來展示動態(tài)內(nèi)容和響應(yīng)用戶操作。
三、template 和 script 是如何配合工作的？
Vue 在運行時會把 template 編譯成一個渲染函數(shù)，這個函數(shù)會在執(zhí)行時訪問 script 中定義的數(shù)據(jù)，并生成最終的 DOM。當(dāng)數(shù)據(jù)變化時，Vue 會自動重新運行渲染函數(shù)，更新頁面。
舉個例子，當(dāng)你點擊按鈕觸發(fā) onClick 方法修改 title 后，Vue 會檢測到數(shù)據(jù)變化，然后自動更新頁面上顯示的標(biāo)題內(nèi)容。
這種機(jī)制讓開發(fā)者不需要手動操作 DOM，只需要關(guān)心數(shù)據(jù)狀態(tài)，ui 就能自動同步。
四、一些容易忽略但重要的細(xì)節(jié)
- template 只能有一個根元素，否則會報錯。比如不能直接寫多個
.png)
