vue实现单文件组件
Vue 单文件组件 (SFC) 实现
单文件组件 (Single File Component, SFC) 是 Vue.js 的核心特性之一，它将模板、脚本和样式封装在一个 .vue 文件中，便于组织和管理组件代码。
基本结构
一个典型的 .vue 文件包含三个部分：
<template>
<!-- HTML 模板 -->
<div class="example">{{ msg }}</div>
</template>
<script>
// JavaScript 逻辑
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
/* CSS 样式 */
.example {
color: red;
}
</style>模板部分
<template> 标签内包含组件的 HTML 结构，支持所有 Vue 模板语法：
- 插值表达式
{{ }} - 指令如
v-if,v-for,v-bind等 - 事件处理
v-on - 插槽
<slot>
<template>
<button @click="count++">
Clicked {{ count }} times
</button>
</template>脚本部分
<script> 部分定义组件逻辑：
- 使用
export default导出组件选项 - 支持 ES6 模块语法
- 可以定义 data, methods, computed, props 等
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>样式部分
<style> 部分定义组件样式：
- 默认全局作用域
- 添加
scoped属性可使样式仅作用于当前组件 - 支持预处理器如 SCSS, Less
<style scoped>
.button {
background-color: #42b983;
}
</style>高级特性
-
使用预处理器 可通过 lang 属性指定 CSS 预处理器：
<style lang="scss"> $primary-color: #333; .text { color: $primary-color; } </style> -
自定义块 支持添加自定义块，如
<docs>用于文档：<docs> ## 这是一个示例组件 用于演示自定义块功能 </docs> -
组合式 API 在
<script setup>中使用组合式 API：<script setup> import { ref } from 'vue' const count = ref(0) </script>
构建配置
Vue SFC 需要构建工具处理：
- 使用 Vue CLI 或 Vite 创建项目
- 需要 vue-loader (Webpack) 或 @vitejs/plugin-vue (Vite) 处理
.vue文件
注意事项
- 组件名应该使用 PascalCase 命名
- 避免在模板中使用复杂的逻辑
- 合理使用作用域样式避免冲突
- 大型项目建议按功能组织组件目录结构
通过单文件组件，Vue 实现了关注点分离的同时保持了组件代码的集中管理，大大提高了开发效率和可维护性。
