Vue实战项目 二

1 vue-router 路由

路由懒加载语法；默认路由的设置；<router-view>占位

2 TabBar 组件

  • MainTabBar ：和项目相关，指定每个视图的 path ，以及文字的激活状态。这个组件决定了 一个 TabBar 里面有 几个 TabBarItem。

  • TabBar ：独立的组件，内置一个 slot ，和整个 tabBar 的高度等布局有关

  • TabBarItem ：独立的组件，关于每个 item 的布局样式。

    2.1 TabBarItem 激活状态的切换

跟路由相关（视图的切换），可以打印 route 对象，查看对象中的一些属性

1
2
3
4
5
6
7
8
9
10
11
12
computed: {
    // v-if 显示 激活状态下的 icon
  isActive() {
    return this.$route.path.includes(this.path);
  },
    // 动态绑定文字颜色
  getStyle() {
    return this.$route.path.includes(this.path)
      ? { color: this.activeColor }
      : "";
  },
},

3 选项卡控件

1-如何请求不同 type 和 page 的数据

getHomeGoods(type, page) 用来请求商品数据，我在想能否通过 tabcontrol 传递过来的 index 去对应 type 和 page。结果就是自己想多了，type 是已知的，可以直接拿来用。

总结：

  • 首先分析数据的数据结构，这将决定怎么存储获取来的数据
1
2
3
4
5
goods: {
  new: { list: [], page: 0 },
  pop: { list: [], page: 0 },
  sell: { list: [], page: 0 },
},
  • 然后分析请求数据方法 ，比如 getHomeGoods(type, page) 需要 type 和page。type 已知，page初始化是0，取数据的时候 page + 1，每次调用数据之后 page + 1 
1
2
3
4
5
6
7
8
getHomeGoodsList(type) {
  const page = this.goods[type].page + 1;
  getHomeGoods(type, page).then((res) => {
    console.log(res);
    this.goods[type].list = res.data.data.list;
  });
  this.goods[type].page++;
},
  • 其他要求：上拉加载数据更多，本质就是上拉之后，请求 page +1 的数据，并且原来的数据保持不变。也就是将每次请求来的数组 和之间的数组进行合并。
1
2
// 数组的解构 arry= [a,b,c]  ...arry 就是把 a，b，c 拆分
this.goods[type].list.push(...res.data.data.list);
  • 最后，考虑如何将数据传递给子组件，这个时候开始 考虑组件之间的关系
1
2
3
4
子组件需要的数据：goods[type].this
type:['new'、'pop'、'sell']
父组件有 type 对应的 index
通过 switch case 让 type 和 case 一一对应

2- 父子组件传递

子组件向父组件传递，父组件接收的时候 @titleClick="titleClick", v-on绑定不需要写出参数，在method 里面接收可以直接使用传递参数。

父组件向子组件传递数据的时候，用 v-bind 绑定。

3- 复制 选项卡 DOM

因为 bette-scroll 本质是 使用了 translate ，因此即使当页面滚动到 offsetTop 的之后，设置了 fix 布局还是会继续滚动。所以复制一份 选项卡控件，放在 scroll 外部。

4- 同步 tabControl 和 tabControlCopy 的 激活选项

点击事件获取 index，在点击事件后同步两个组件中的 currentdIndex

5 better-scroll

在 scroll 组件中 为什么 创建 BS 对象在 mounted 里面？

因为 better-scroll 实例化的第一个参数是一个原生的 DOM 对象，wrapper ，因此需要获取到 DOM，mounted 时 DOM 已经。

scroll 组件中的方法 怎么传递给 Home 组件

scroll 组件中的方法通过 on 函数自动监听，可以在 on 方法 里面直接 emit 

1
2
3
this.scroll.on("scroll", (position) => {
   this.$emit("scroll", position);
 });

为什么封装 BS 方法

better-scroll 的 BS 对象有许多方法，比如 scroll（获得position），scrollTo（滚动到到某个位置）。如果在 Home 组件需要用这些方法，通过 $refs.scroll 去获取 scroll 对象，比较累赘。直接封装 scrollTo方法

1
2
3
this.$refs.scroll.scroll.scrollTo(0, 0, 300);
//封装
this.$refs.scroll.scrollTo(0, 0, 300);

使用 BS 方法的时候需要考虑 $refs.scroll 是否获取到值。可能会因为 DOM 会渲染完全而没有获取到 scroll 对象

1
2
3
scrollTo(x, y, time = 300) {
   this.scroll && this.scroll.scrollTo(x, y, time);
 }

6 backTop 组件

怎么显示和隐藏组件

scroll 组件传递给 home positon值，positon 和 BACKTOP 去比较。

BACKTOP 存放在 common/const.js 文件中，这样易于修改吧

组件可以监听事件，使用 v-if 指令等

1
<back-top v-show="isBackTop" @click.native="goBack" />

backTop 的显示和隐藏使用 v-show 更合适。v-show 适合频繁使用的，v-if 初次花销大，适合很少使用的

7 详情页 navbar

点击组件上面的title，跳转到相应的界面

获取相应 title 的offsetTop 值

  • mounted
  • updated
  • $nextTick
  • 等商品信息的图片加载完了1）refresh() 节流 2)获取offsetTop 节流

无论是 refresh() 方法 还是 获取 offsetTop 都不能直接写在

滚动到相应界面，导航上面的 title 高亮

给整个页面划分区间段，titleOffsetTop[4]

1
2
3
4
5
6
7
0-1 —>  商品（currentIndex = 0)

1-2 —>  参数（currentIndex = 1)

2-3   —>  评论（currentIndex = 2)

3-max —>  推荐（currentIndex = 3)

8 组件

什么时候需要把部分功能抽离出组件

1）common 和 content

common 是与当前业务无关的组件。比如一些 tabar navbar scroll 回到顶部按钮

content 是与当前业务相关：

  • 我把 navbar 放在了 content

2）什么时候将一个功能拆分成组件

对于每个视图来说，一个模块是一个组件，还有功能独立的模块，比如 scroll ，会带顶部等等

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 导航栏 -->
<home-nav-bar />
<!-- 轮播图 -->
<home-swiper >
<!-- 推荐 -->
<home-recommend >
<!-- 今日流行 -->
<home-feature />
<!-- 选项卡控件 -->
<tab-control >
<!-- 商品列表 -->
<good-list />

还有就是考虑到复用性。

比如 tabBar 为什么不直接直接在tabbar 里面直接写 4 个 tabbaritem ，还要重新建一个组件。因为在其他地方可能就有 5 个 4 个 tabbaritem，这个时候可能就需要修改 tabbar 里面的样式内容。

再比如 goodlist 内部的 goodlistItem 的个数是根据传来的数据决定的，但是在在 goodlist 里面的 goodlistItem 是 2列布局，在分类视图 goodlistItem 是 3 类布局。

比如 recommend 模块，有 4 个item ，但是这个 4个 item 在这个项目中只出现了一次，就不需要封装成组件。

一个大组件的中的小模块考虑复用性 和 差异性。如果可以复用，有存在差异就再封装一个组件。

9 vue-router 路由

路由跳转之后再返回，页面保持不变。 keep-alive ， exclude 组件名（定义路由关系时组件）

10 购物车

怎么把详情页的数据传递给购物车界面

vuex

怎么把 vuex 中 state 中的商品列表传递给 购物车

getters

11 vuex

  • 抽离代码

  • mutation-types.js ：commit的方法和mutation的方法起别名。

1
2
export const ADD_COUNT = 'addCount'
export const ADD_PRODUCT = 'addProduct'

12 mixin 混入用法

混入选项合并

混入的声明周期函数都会进行自动合并（双方都保留），但是 method 里面方法，只会保留组件中的方法。

在 backTop 功能的混入对象里，需要 scroll 方法中的前一部分，显然在混入对象写一个同名方法是无效的。但是我们可以在混入对象中封装这一部分功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
scroll(position) {
  // this.isBackTop = -position.y > BACKTOP;
  this.listenShowBackTop(position);

  // 2.tabControlCopy 显示和隐藏，吸顶效果
 。。。。。
},
--- mixin ---
methods: {
    listenShowBackTop(position) {
        // 1. 如果 超过 BACKTOP 就显示 回到顶部
        this.isBackTop = -position.y > BACKTOP;
    },｝

13 数据

13.1 数据请求

怎么封装 axios ，request 函数

1）request 函数返回一个 axios.create() 创建的实例，request 的参数就是一些配置 option

1
2
3
4
5
6
7
export function request(options) {
    const instance = axios.create({
        baseURL: 'http://152.136.185.210:8000/api/z8',
        timeout: 5000
    })
    return instance(options)
}

2）不同的数据传入不同的 url 

1
2
3
4
5
export function getHomeMultidata() {
    return request({
        url: 'home/multidata'
    })
}

13.3 数据的保存

【1】data 里面用来保存对象的变量,初始值设置的是 null。会出现如下TypeError: Cannot convert undefined or null to object`

1
2
// product: null,
product: {},

【2】在向一整个组件传递数据的时候，可能其中某个小数据没有加载成功，组件对象就找到这个数据而报错。在使用数据之前先判断传递的对象是否为空。

1
v-if="Object.keys(productInfors).length !==0"

【问题】：商品参数的信息的图片信息，部分商品没有这个数据，怎么对参数信息处理。

方法一：在 Detail 组件将数据传给 子组件之前对数据进行处理

1
2
3
4
5
6
7
8
9
10

export class GoodsParam {
    constructor(info, rule) {
        // images 可能没有数据
        this.image = info.images ? info.images[0] : '';
        this.infos = info.set;
        this.sizes = rule.tables;

    }
}

方法二：在子组件中，用计算属性，对数据进行判断

1
2
3
4
5
6
7
8
9
  <div class="info-img" v-if="getImages">
    <img :src="itemParams.images" alt />
  </div>
  
 computed: {
  getImages() {
    return this.itemParams.images ? true : false;
  },
},

【问题】：有的商品评论整个信息都没有,预处理

1
2
3
4
5
6
7
data() {
	return{
    	commentInfo:{}
}}
if (result.rate.cRate !== 0) {
    this.commentInfo = result.rate;
  }

14 css

伪元素的绝对定位，伪元素的父级可以是设置伪元素的标签

1
2
3
4
5
6
7
8
9
10
11
<span></sapn>

span {
	position:relative;
}

span::before {
	position:absolute
    content: "";
	/*position:absolute 可以替换 display: block，relative 不可以*/
}

vertical-align

1
2
3
// vertical-align属性只对行内元素有效，对块内元素无效 无法共存
display: block; 
vertical-align: middle;

flex 布局

image-20200807144522025

父元素是 flex 布局，子元素不需要设置 flex-grow、指定宽度，父元素设置justify-content: space-between;就好

image-20200807144836944

flex-item 设置了 flex: 1之后，align-item 默认是从侧轴的头部排列，也是就 item 的 height 都是一致的。如果想要上图一样，高度不一致，需要设置align-item :center

  • 默认情况下每个 flex-item 的横轴高度是一样的，也就是content 内容的高度也是一样的
  • flex-grow 和 justify-content 一起使用需要注意
  • flex 简写包括：flex-grow、flex-shrink、flex-basis。
1
2
3
4
flex: 30%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家