Vue单文件组件（SFC）简介·框架中·模块化每个组件独立便于开发、测试和复用

Vue单文件组件（SFC）简介

在Vue框架中，页面的格式通常采用单文件组件（SFC）的结构。这种结构把页面的结构、行为和样式都集中在一个文件里，方便开发和维护。

模板部分

模板部分用HTML标签定义页面的结构和内容，放在<template>标签内。这里可以使用Vue的模板语法，比如插值、指令和事件绑定。

比如：

<div id="app"> <h1>{{ title }}</h1> <p>{{ description }}</p> <button @click="toggleDescription">Toggle Description</button> </div> 

脚本部分

脚本部分用JavaScript或TypeScript编写页面的逻辑和数据，放在<script>标签内。这里定义组件的行为，比如数据、方法等。

比如：

export default { data() { return { descriptionVisible: true }; }, methods: { toggleDescription() { this.descriptionVisible = !this.descriptionVisible; } } }; 

样式部分

样式部分用CSS定义页面的样式，放在<style>标签内。Vue支持作用域样式，确保样式只作用于当前组件。

比如：

<style scoped> .description { display: none; } </style> 

单文件组件的优势

将模板、脚本和样式放在一个文件中，单文件组件（SFC）格式有以下优势：

• 可维护性：结构、行为和样式集中，便于理解和维护。
• 模块化：每个组件独立，便于开发、测试和复用。
• 工具支持：Vue生态系统中的工具（如Vue CLI、Vue Loader）提供良好支持。

实例说明

以下是一个完整的Vue单文件组件示例：

<template> <div id="app"> <h1>{{ title }}</h1> <p v-if="descriptionVisible">{{ description }}</p> <button @click="toggleDescription">Toggle Description</button> </div> </template> <script> export default { data() { return { title: 'Hello Vue!', description: 'This is a simple description.', descriptionVisible: true }; }, methods: { toggleDescription() { this.descriptionVisible = !this.descriptionVisible; } } }; </script> <style scoped> .description { display: none; } </style> 

使用单文件组件（SFC）格式，可以更好地组织页面，提高开发效率和代码质量。建议开发者充分利用Vue的组件化思想和生态系统中的工具，如Vue CLI和Vue Loader。