微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻

手册

目录

Vue教程
简介 指令 v-bind v-if 条件语句 v-show v-for 循环语句 事件 v-on 方法 事件修饰符 表单 v-model CSS 绑定 Computed 计算属性 观察者 模板
Vue扩展
扩展和安装 第一个 SFC 页面 组件 Props 选项 v-for 组件 $emit() Fallthrough 属性 范围样式 组件 插槽 v-slot 指令 作用域插槽 动态组件 Teleport 传送 HTTP 请求 模板参考 生命周期钩子 Provide/Inject 路由 表单输入 动画 动画与 v-for 构建 组合 API
Vue参考
内置属性 组件实例

首页 大前端 Vue.js Vue 教程

组件

收藏978

阅读13499

更新时间2025-08-22

第一个 SFC 页面

Props 选项

创建组件

Vue 中的组件是一个非常强大的工具，因为它让我们的网页变得更具可扩展性，并且更大的项目变得更容易处理。

让我们创建一个组件并将其添加到我们的项目中。

  1. 在 src 文件夹内创建一个新文件夹 components。

  2. 在 components 文件夹中，创建一个新文件 FoodItem.vue。 通常使用 PascalCase 命名约定来命名组件，不带空格，并且所有新单词都以大写字母（也是第一个单词）开头。

  3. 确保 FoodItem.vue 文件如下所示:

FoodItem.vue 组件内的代码:

正如您在上面的示例中看到的，组件也由