![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习
文章平均质量分 62
m0_57221025
这个作者很懒,什么都没留下…
展开
-
VUE数据劫持代理(Object.defineProperty())
MDN关于Object.defineProperty //模拟vue中的data let data = { name: "aaa", age: 22 } // 模拟组件实例 let _this = {}; //使用 Object.defineProperty for (let item in data) { // console.log(item, data[item]); Obj原创 2021-10-07 21:43:22 · 128 阅读 · 0 评论 -
Cart购物车组件
从VUEX中,获取已经加入购物车中的数据;1需求是获取已经加入购物车中数据的总个数;cartLength,可以在组件中通过this.$store.state获取相关数据,但是这种方法不规范。应该使用vuex中的getter方法。在cart组件中如何使用vuex中的getter中,除了this.$store.getters.cartLength,有更好方式,引入mapGetters方法,直接从vuex引入使用,具体步骤如下:改进前:<template v-slot:center&...原创 2021-08-31 22:20:24 · 288 阅读 · 0 评论 -
详情页组件detail
新建detail.vue;(重要的视觉组件,放在view中)router中配置index.js的相关路由信息;(路由传递数据的两种方式,params和query,这里用params方式),{ path: "/detail/:iid", component: Detail}给商品详情页组件添加点击事件和对应的方法itemClick() { this.$router.push("/detail/" + this.goodsItem.iid); },跳转的原创 2021-07-25 10:03:25 · 1074 阅读 · 0 评论 -
防抖函数debounce
防抖就是多次执行函数,只执行最后一次。节流就是只执行第一次,后面的都不执行; debounce(func, delay) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args);//执行 }, de原创 2021-07-15 21:31:55 · 118 阅读 · 0 评论 -
betterScroll的使用
>>>>>betterScroll in github<<<<<<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --></div>.原创 2021-07-15 21:09:19 · 335 阅读 · 0 评论 -
supermall的“当季流行组件”
1当季流行组件1-1、案例中本身是一张图片,将这张图片保存在img目录下的home文件夹中;他是a标签中的img;仍然需要单独建立一个组件;1-2、主页的导航栏需要不能跟着拖动直接移动了,需要固定定位display:fix或者sticky,再设置z-index。2选项卡组件TabControl组件,这个组件的设计方式有点类似导航栏组件,但是又有区别。导航栏组件用的是插槽,因为三个位置可能需要实现不同的功能。而选项卡功能组件只需要显示文字和路由功能,复用时也只需要修改内部文字即可;原创 2021-07-08 20:58:05 · 67 阅读 · 0 评论 -
supermall的“推荐栏“组件
跟banner组件的思路一致;/home/childrencomponent/HomeRecommedView.vue中,采用与HomeSwiper一样的组件抽取方法,数据已经在home创建时获取,在使用组建时把父组件的属性绑定给子组件。子组件//HomeRcommendsView.vue<template> <div class="recommend"> <div v-for="item in recommends" :key="item" cla原创 2021-07-03 17:47:43 · 78 阅读 · 0 评论 -
spuermall项目nav组件和轮播图组件
1.编辑导航栏组件;使用具名插槽的方式。单独创建NavBar.vue组件。nav-bar构思是分成左中右三个部分,可以按需使用。使用的是flex布局<template> <div class="nav-bar"> <div class="nav-left"><slot name="left"></slot></div> <div class="nav-center"><slot n原创 2021-06-29 22:06:24 · 108 阅读 · 0 评论