Vue2.0开发之

2023-07-09 21:28| 来源: 网络整理| 查看: 265

一概述初始项目预览最终项目预览

二案例说明2.1 初始项目代码结构

2.2 Components组件与项目的对应关系

对应关系：

components/Counter：物品数量 components/Footer：购物车底部 components/Goods：购物车商品 components/Header：购物车标题三导入、注册、使用Header组件3.1 导入Header组件(App.vue)1import Header from '@/components/Header/Header.vue' 3.2 注册Header组件12345export default { components:{ Header }} 3.3 使用Header组件1234567 App 根组件 3.4 添加Header组件后的Header效果图

四修改Header标题4.1 定义title标题属性—Header.vue12345678export default { props:{ title:{ default:'', type:String } }} 4.2 通过titlee显示Header的标题内容—Header.vue123 {{title}} 4.3 App.vue设置Header的标题1234567 App 根组件 4.4 效果图

【本文地址】

公司简介

联系我们