vue组件的基本结构由template、script和style三部分组成，其中template和script是核心。一、template作为组件的“骨架”，使用html模板和vue语法绑定数据与事件；二、script作为组件的“大脑”，定义数据、方法和生命周期钩子；三、vue将template编译为渲染函数，自动响应script中数据变化并更新dom；四、细节上需注意template只能有一个根元素，变量名需一致，vue 3可使用简化语法。
Vue组件的基本结构主要由三部分组成：template、script 和 style。这三部分分别负责组件的视图结构、逻辑行为和样式表现。其中，template 和 script 是最核心的部分，它们一起决定了组件如何渲染和交互。
简单来说，template 负责写页面长什么样，而 script 负责告诉它这些内容怎么动起来。
一、template 是组件的“骨架”
在 Vue 单文件组件中， 标签里写的其实是 HTML 模板，只不过可以使用 Vue 的模板语法来绑定数据、响应事件等。
立即学习“前端免费学习笔记（深入）”；
比如你可以这样写：
<template> <div> <h1>{{ title }}</h1> <button @click="onClick">点我</button> </div> </template>
这段代码中的 {{ title }} 和 @click 都不是原生 HTML 的写法，而是 Vue 提供的指令和插值语法。它们能正常工作，是因为 script 中提供了对应的数据和方法。
二、script 是组件的“大脑”
<script> 部分定义了组件的行为和数据来源。你可以在里面定义 data、methods、computed、生命周期钩子等。</script>
例如：
<script> export default { data() { return { title: 'Hello Vue' } }, methods: { onClick() { this.title = '你点了按钮！' } } } </script>
这部分定义了 title 数据和 onClick 方法，然后 template 就可以使用这些变量和方法来展示动态内容和响应用户操作。
三、template 和 script 是如何配合工作的？
Vue 在运行时会把 template 编译成一个渲染函数，这个函数会在执行时访问 script 中定义的数据，并生成最终的 DOM。当数据变化时，Vue 会自动重新运行渲染函数，更新页面。
举个例子，当你点击按钮触发 onClick 方法修改 title 后，Vue 会检测到数据变化，然后自动更新页面上显示的标题内容。
这种机制让开发者不需要手动操作 DOM，只需要关心数据状态，ui 就能自动同步。
四、一些容易忽略但重要的细节
- template 只能有一个根元素，否则会报错。比如不能直接写多个
