VUE的爬坑之路(二)--组件的注册及头部和尾部共用

最新推荐文章于 2024-06-05 10:01:11 发布
最新推荐文章于 2024-06-05 10:01:11 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_z_w123/article/details/81592555
版权

1.建立文件

说明

<template>标签内div标签不能同级但可以嵌套</template>

建立文件

2.组件注册

在main.js里

组件注册

3.App.vue的书写

书写方法

4.效果图

运行效果

上一篇：axios跨域

rightfight
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue-cli3脚手架项目：HeaderTop（公共头部）组件（使用v-slot、pros实现）
bailizx
07-12 2273
目录 2.2 HeaderTop组件（使用v-slot、pros实现） 2.2.1 HeaderTop组件布局（css样式）实现 2.2.2 使用插槽实现标签的插入（预留标签） 2.2.3 代码实现 2.2 HeaderTop组件（使用v-slot、pros实现） 学习插槽请参考：vue官网中插槽内容，下面是项目实现的地方。 因为多个单页路由组件都有类似的头部：标题，[可选的：搜索，登录|注册]。因此可以将其抽取成一个公有的组件，以实现组件的复用。复用组件命名为HeaderTop组件。 2.
Vue开发实例（05）之搭建项目主页面头部、导航、主体等页面布局
编程界明世隐的博客
03-11 2万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 引言 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
推荐使用Vue Fixed Header组件，打造完美的固定头部效果
最新发布
gitblog_00029的博客
06-05 477
推荐使用Vue Fixed Header组件，打造完美的固定头部效果 项目地址:https://gitcode.com/potato4d/vue-fixed-header 在网页设计中，一个固定的头部（header）能够提供始终可见的导航元素，提升用户体验。今天，我们要向您推荐一款基于Vue.js的强大且易用的开源组件——Vue Fixed Header。这款组件不仅简单易集成，而且在各种浏览器环...
【VUE项目实战】16、主页Header和左侧菜单栏布局
热门推荐
程序猿之洞
10-02 2万+
接上篇《15、Home页面布局设计及框架搭建》 上一篇我们搭建了Home主页面的整体框架（三大块，左侧菜单栏、右侧主体区域和头部导航栏），半篇我们来编写头部Header和左侧菜单栏的布局样式。 先来回顾一下我们的整体布局： 然后我们要实现的效果图： 一、头部Header布局 可以看到，头部区域左侧是一个Logo和系统的名称，右侧是一个退出按钮。这种左右布局最简单的实现方式就是使用flex布局。左侧包一个大的DIV，放一个图片和一个文本，右侧就放一个退出按钮。 下面我们来编写，我们在Home.vue中
关于在vue项目当中引入多个子组件时候只显示一个组件的问题
qq_41304029的博客
01-08 1012
少了留言区组件没有展示出来，本来我以为是组件写的有问题，然后将列表组件复制几遍时候一样只是展示第一个组件。这个是在html文件当中编写的，不是.vue组件当中编写，然后修改为双标签的才好了。经过查阅资料，才知道。
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在Vue.js开发中，动态生成组件是一个非常实用的功能，它允许开发者根据业务需求灵活地创建和更新组件。`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在...
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue开发实例（07）之编写头部页面
编程界明世隐的博客
04-27 8131
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 引言 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
vue配置公用头部、底部，可控制显示隐藏
weixin_47906106的博客
08-25 2365
例如：demo页面不需要显示header，在页面被创建的时候使用(this.$emit)告诉上级不显示header，可以使用 this.$emit(‘header’,false);来控制header不显示。header 和 footer 默认显示，例如某个页面不需要显示header。定义header和footer公共组件并且在App.vue中引用。并且在当前页面写自己的header代码就可以了。
vue移动端尾部组件
小剑儿的博客
07-19 245
<template> <div style="height:50px;"> <van-tabbar v-model="active" style="background: #032E4D" > <van-tabbar-item icon="wap-home" to="/Home" >首页</van-tabbar-item> ...
Vue3+Element-Plus 登录组件头部布局实现 七
build2024
11-08 1948
3.3 登录组件头部布局 1.头部在login_box 这个div元素里面绘制 2.刷新页面，头像就已经有了。但是样式还比较不美观 3.接下来，设置头像相关样式。在.login_box里面，可以放一个语法嵌套。首先给avatar_box盒子设置一个宽高 ，然后让里面img 图片的宽度等于父盒子的宽高。宽高等于100%，这样就填满了父盒子 4.给图片设计一个边框 5.可以看到，有这个明显的边框 6.把它改成圆角，加上圆角属性 7.但是圆框比图片要小一些，所以接下来...
Vue3入门笔记----实现公共头部样式
panzhixiang
10-31 1694
Vue3实现公共头部组件
vue引用公用的头部和尾部文件。
weixin_30567225的博客
06-15 1899
我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部，每个页面都需要引用这两个，我以组件的方式，来引用这样只需要添加注册的组件就可以了。 第一步、在components文件夹下新建header.vue，footer.vue两个组件 第二步、修改index.js，也就是程序入口：引入两个头尾组件 第三步、修改App.vue也就是页面入口：引入两个头尾组件 ...
第六，vue组件及应用-创建头部组件
li__po
05-29 4233
vue组件及应用-创建头部组件①在components文件夹下面新建文件myHeader.vue组件，删掉留下来的helloworld.vue。在myHeader.vue输入下面内容：分析：myHeader.vue页面分成三个部分：1，&lt;template&gt;&lt;/template&gt;里面放的是html代码，为结构部分。2，&lt;script&gt;&lt;/script&gt;...
vue脚手架配置公用头部、底部。控制显示隐藏
dlh918的博客
08-15 6241
先把项目下载地址贴上：https://github.com/623317276/vue-myproject.git   路由引入我就不详细说了 直接进入主题： 我会在app.vue文件里引入公共的header 和 footer 这是我app.vue的代码块 &lt;template&gt; &lt;div id="app"&gt; &lt;app-header v-if=...
Vue 爬坑之路（二）—— 组件之间的数据传递
05-26
好的，来谈谈 Vue 组件之间的数据传递。 1. 父组件向子组件传递数据 父组件可以通过 props 将数据传递给子组件，子组件通过 props 接收数据。 父组件： ``` <child-component :message="msg"></child-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值