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。