Vue.js 2.0 单文件组件(Single File Components,简称 SFC)是一种结构清晰、可维护性强的组件开发方式。它将一个组件的模板、脚本和样式放在一个文件中,使得组件的结构更加清晰、可读性更高。

单文件组件使用.vue文件扩展名,包含三个部分:<template>、<script> 和 <style>。以下是一个简单的单文件组件的例子:
<!-- MyComponent.vue -->

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New Message!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在这个例子中,<template> 部分包含了组件的模板,<script> 部分包含了组件的脚本,<style> 部分包含了组件的样式。scoped 属性表示样式仅对当前组件有效。

使用单文件组件有几个优势:

1. 结构清晰: 将模板、脚本和样式分离在一个文件中,使得组件的结构更加清晰。

2. 可维护性强: 单文件组件使得组件的代码更易于维护和理解,也更容易进行版本控制。

3. 热重载: 在开发环境中,单文件组件支持热重载,使得修改代码后不需要刷新整个页面就能够看到变化。

4. 作用域样式: 使用 <style scoped> 可以使得样式只在当前组件中生效,不影响全局样式。

在使用单文件组件时,你需要使用构建工具(如Webpack、Vue CLI等)来处理这些文件,将其转换成浏览器可识别的代码。Vue CLI 提供了一个现成的项目脚手架,可以让你轻松地创建和管理 Vue 项目,包括单文件组件的开发和构建。


转载请注明出处:http://www.zyzy.cn/article/detail/4813/Vue