欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Navheader部分结束总结

程序员文章站 2022-04-25 09:09:56
...

Navheader部分总结

一.获取数据接口(axios)
1》因为在main.js中,我们
Navheader部分结束总结
所以我们在Nav-header.vue使用axios时,不需再import引用,直接this.axios使用即可
2》在main.js中,我们对axios进行了基础设置
Navheader部分结束总结
3》我们在vue.config.js中,进行代理设置
注意改完代理之后要重新执行项目
Navheader部分结束总结
4》
Navheader部分结束总结
注意因为进行了基础设置,interceptors拦截,此时res已经是data数据了,
而且用get方法时需要用params传递参数,若用post则不需要用params
Navheader部分结束总结

二.v-for指令中 :key的作用:
提高渲染速度,后期重复二次渲染的时候,会自动缓存,发现有数据元素已经缓存之后,它就直接获取,不会重复渲染,提高性能,但是只有数据量特别庞大的时候,才有感觉

三.v-bind格式(可省略为:)
Navheader部分结束总结
href:绑定了之后,后面的双引号里面直接加变量,若相加地址,必须里面在加一个单引号

<a v-bind:href="'/#/product'+item.id" target="_blank">

四.filters 局部过滤器:通常用于金额或者日期的格式化Navheader部分结束总结
Navheader部分结束总结
上述图片 item.price 即为currency的val参数

五. v-if 和 v-on(简写成@)指令

Navheader部分结束总结
Navheader部分结束总结