Navheader部分结束总结

最新推荐文章于 2022-12-13 16:22:21 发布
最新推荐文章于 2022-12-13 16:22:21 发布
阅读量587 收藏
点赞数
分类专栏： vue仿小米商城项目笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25503949/article/details/106546962
版权
本文总结了Vue项目Navheader部分的配置，包括axios的基础设置，如在main.js中设置baseURL和代理配置在vue.config.js中。讨论了v-for指令的key属性对渲染性能的影响，v-bind的使用，以及局部过滤器filters的应用，特别是针对金额格式化的场景。还提到了v-if和v-on指令的使用。
摘要由CSDN通过智能技术生成

Navheader部分总结

一.获取数据接口（axios）
1》因为在main.js中，我们
在这里插入图片描述
所以我们在Nav-header.vue使用axios时，不需再import引用，直接this.axios使用即可
2》在main.js中，我们对axios进行了基础设置
在这里插入图片描述
axios.defaults.baseURL = ‘/api’ 与代理的’/api‘有联系

3》我们在vue.config.js中，进行代理设置
注意改完代理之后要重新执行项目
在这里插入图片描述
4》
在这里插入图片描述
注意因为进行了基础设置，interceptors拦截，此时res已经是data数据了，
而且用get方法时需要用params传递参数，若用post则不需要用params

最低0.47元/天 解锁文章
啵雨的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目实战：首页实现
林夏天的博客
03-29 3359
商场首页 项目 1. Nav-Header组件 组件复用的一个技巧 通过 @mixin 简化代码 统一修改系统主题色 数据请求 2. 首页轮播功能实现 使用 vue-awesome-swiper 实现轮播图 首页轮播菜单实现 Modal 弹窗动画 与 父子组件通信 懒加载 一. Nav-Header组件 （1）组件复用的一个技巧： 因为商场网站中多个页面共用了头部组件nav-header和...
http header 总结
程序小白的探索空间
07-26 641
HTTP header总结
HTML语义化标签一（header、nav、section、article）
qq_64469885的博客
12-13 2459
HTML语义化标签一（header、nav、section、article）
Nav-header部分之scssCSS预处理器
qq_25503949的博客
06-03 260
Nav-header部分之scssCSS预处理器 一基础用法： 可嵌套，能更好的表示层级关系，其他写法与普通css类似 若想加伪类，则需在子级&：hover，如下所示 .header-menu{ width: 643px; padding-left: 209px; .item-menu{ display: inline-block;
HTML5基本标签使用header，nav和footer
张晨光老师的播客
05-06 5403
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{ padding: 10px ... } 定义完之后呢，...
HTML相关知识简单总结记录
03-09
HTML5引入了更多的语义化标签，如<header>、<nav>、、等，这些标签有助于提高网页的可读性和可访问性。 三、HTML属性 属性是附加在HTML元素上的额外信息，比如这是一个链接中的href属性指定了链接的目标地址。其他...
doc：总结文档
02-24
在HTML5中，新增了语义化标签（Semantic Elements），例如`<header>`、`<footer>`、`<nav>`、`<section>`等，这些标签帮助开发者更好地组织页面结构，提高可读性和可访问性。同时，HTML5引入了离线存储（Offline ...
web前端学习总结1.docx
12-06
4. code用于等宽字体，pre用于预格式化的文本，small用于较小字号，time用于时间戳，br用于换行，html5的header、nav、article、section、aside、footer、div、span等标签用于定义内容区块。 三、表单表格 1. form...
frontend-summary:个人前端总结
04-29
8. **HTML5新特性**：HTML5引入了许多新元素，如`<header>`、`<footer>`、`<nav>`、`<article>`、`<section>`和`<aside>`，帮助结构化内容。此外，还有`<canvas>`（画布）、`<video>`和`<audio>`元素支持多媒体，`...
（自己）前端设计常用效果-总结1
08-08
在后台设计中，头部（Header）通常是最先引入眼帘的部分，它承载着网站的品牌标识和主要导航。在示例中，我们创建了一个简单的顶部布局。HTML结构如下： ```html ;height: 100%"> <div id="dcHead"></div><!-- ...
有趣的小米网站
txq231254的博客
05-23 335
前言 检验成果的时候到了！这次的写的是一个小米官网页面 ，这个项目是由html+css+JavaScript三个结合写的，从学习JavaScript的时候，知道它能做许多页面的交互效果，提高用户的体验感！ 它可以使页面跳动起来，感觉效果应该会不错。所以就来尝试了一下，感受JavaScript带来的美好体验。 一、首页顶部布局和 这个首页我是大体分为 header 和 banner两个部分，然后再将header拆分为了头部分（head）和头部导航栏（nav-header）两部分，并且以按照标准流的上
tableView Header view 自动调整高度
IOS -Step by step
01-19 6665
- (void)adjustTableHeaderHeight:(NSUInteger)newHeight{ NSUInteger oldHeight = self.frame.size.height; NSInteger originChange = oldHeight - newHeight; [UIView beginAnimations:nil context:n
sidebar-nav 配合nav-header 实现精美的侧边导航
海涛高软
01-09 6533
添加sidebar-nav这个类后就可以做一个侧边的导航条运行后效果：为每一个子项添加nav-header这个类后，就变成 再次运行，界面如下：FR：海涛高软（QQ技术群：386476712）
html5中的header，nav，footer
qq_38922435的博客
05-27 9642
html5中的header，nav，footerheader标签在新的标准中header标签定义如下："A group of introductory or navigational aids.”基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如：&lt;head...
web前端：main、header、footer、nav、article、section标签的用法
热门推荐
网民阿三的博客
05-14 1万+
HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。 默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。 标签main main标签用于呈现网页的主体内容...
html5初学（header、nav、main、aside、footer标签）
qq_45862126的博客
03-18 3568
html5初学（header、nav、main、aside、footer标签） 老规矩，为了便于理解先上图目前大多数的网页都差不多是这个框架 上代码，文末有各个标签的解释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
使用vant 制作导航栏
马优晨
04-13 5316
先看一下实际登录效果图： 登录前： 登录后： 登录后其他页面： 使用说明： 语言vue UI库 vant 数据管理 vuex (1) 引入vant import Vue from 'vue'; import { NavBar } from 'vant'; Vue.use(NavBar); vant 基本用法 (2) 封住vue 组件 m-header view层 <t...
vue --- 横向滚动菜单
zxsy19966的博客
06-18 8853
【vue】横向滚动菜单
vue实现页面滑动头部header固定栏背景渐变
sslcsq的博客
03-09 2994
因为代码是我自己要看的 所以我自己看得懂就好了哈哈~直接上代码（有注释） <template> <div> <div class="header" :style="{background:color}"> header </div> <div class="banner" id...
header部分的布局
最新发布
06-10
实现header部分的布局，可以使用CSS中的position和flex布局。 使用position布局： HTML代码： ``` <header> <div class="logo">Logo</div> <nav> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </nav> </header> ``` CSS代码： ``` header { height: 60px; position: relative; background-color: #fff; box-shadow: 0px 2px 2px #ccc; } .logo { position: absolute; top: 50%; left: 50px; transform: translateY(-50%); font-size: 24px; font-weight: bold; } nav { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-left: 20px; } nav ul li:first-child { margin-left: 0; } nav ul li a { text-decoration: none; color: #333; font-size: 16px; font-weight: bold; } ``` 使用flex布局： HTML代码： ``` <header> <div class="logo">Logo</div> <nav> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </nav> </header> ``` CSS代码： ``` header { height: 60px; display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 0px 2px 2px #ccc; } .logo { font-size: 24px; font-weight: bold; margin-left: 50px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav ul li { margin-left: 20px; } nav ul li:first-child { margin-left: 0; } nav ul li a { text-decoration: none; color: #333; font-size: 16px; font-weight: bold; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值