vue单文件组件用法

Vue的单文件组件（Single File Component，简称SFC）是一种简洁的编写前端组件的方式，它将HTML、CSS和JavaScript三者结合在一个文件中。在`.vue`文件中，你可以这样做：

1. **结构部分**（template）：这是组件的主要视图部分，使用HTML模板语法定义组件的用户界面。

   <template>
     <div class="my-component">
       <h1>{{ message }}</h1>
     </div>
   </template>

2. **样式部分**（style）：可以定义内联样式或链接外部CSS文件，如果需要更复杂的样式组织，可以使用预处理器如SCSS或Less。

   <style scoped>
     .my-component {
       color: red;
     }
   </style>

3. **脚本部分**（script）：包括数据绑定、计算属性、方法、生命周期钩子等交互逻辑。

   <script>
   export default {
     data() {
       return {
         message: 'Hello from Vue!'
       };
     },
     methods: {
       showMessage() {
         alert(this.message);
       }
     }
   };
   </script>

4. **选项对象**（components 和 directives）：可以在此声明其他组件或自定义指令。

当你需要使用这个组件时，在另一个Vue应用的`main.js`或其他适当的地方，只需要导入并注册该组件即可：

import MyComponent from './MyComponent.vue';
new Vue({
  el: '#app',
  components: { MyComponent }
});