Vue.js单文件组件(SFC)通常包含模板、脚本和样式三个部分,方便在一个文件中管理组件的所有相关代码。

模板: 基于HTML,并增加了数据绑定和指令,例如v-ifv-forv-bindv-on等,用于响应式地显示数据和处理事件。

脚本: 使用<;script>;标签定义组件的数据、方法、生命周期钩子等。export default语句用于导出组件实例,数据属性(data)通常是声明式的,变化会触发视图更新。方法(methods)定义组件行为,如处理用户操作。生命周期钩子(lifecycle hooks)允许在组件不同阶段执行特定操作,如created()mounted()updated()等。

样式: 使用<;style>;标签添加组件的CSS样式。Vue.js支持局部样式,组件内部的样式只会作用于该组件,避免了样式冲突。可以通过scoped属性进一步限制样式的应用范围。