1.显示页面

效果如图截屏2022-07-24 下午4.02.57.png

router/index 引入组件截屏2022-07-24 下午4.02.22.png

APP.vue 中<router-view></router-view>挂在路由组件

截屏2022-07-24 下午4.03.57.png

2.样式的改变

1.直接改变样式，样式没有发生变化

截屏2022-07-25 上午11.04.21.png 截屏2022-07-25 上午11.04.50.png

这是为什么呢？

/**
  此选择器名字是van-nav-bar组件标签,
  scoped尝试把此选择器后属性选择器匹配当前页标签(选不中组件内部)
  lang = 'less' 当前style标签内是less语法
  用/deep/就不会被vscode标记红线
  /deep/会把属性选择器加到前面（用后代选择器的方式往里找匹配的类名）
 */
//  结论:如果你用了scoped,就需要在选择器前加/deep/即可

深层改变

截屏2022-07-25 上午11.06.57.png 颜色改变

截屏2022-07-25 上午11.07.48.png

解决vscode爆红的问题

截屏2022-07-25 上午11.08.56.png

3.配置vant全局样式

__dirname就是node环境下的全局内置变量，而不是前端的内置变量@

截屏2022-07-25 下午1.27.15.png

4.路由配置

二级路由以及默认打开的页面截屏2022-07-27 下午2.09.50.png

5.导航跳转

截屏2022-07-28 下午2.22.26.png

截屏2022-07-28 下午2.22.45.png

截屏2022-07-28 下午2.23.29.png

6.保存token后跳转

保存当前用户token.js

截屏2022-07-30 上午12.56.48.png

截屏2022-07-28 下午2.26.59.png

url跳转方法1:location.href='www.baidu.com'---当前浏览器地址要和要跳转的地址一样（不包含#后面的锚点信息）------不会刷新网页

跳转方式2:this.$router.push() 压栈（会产生历史记录，可以回退）

跳转方式3:this.$router.replace()替换（不会产生历史记录，不可以回退）

所以根据逻辑，登录后跳转我们不需要回退，所以使用replace方法

7.导航栏样式

fixed sticky 配合使用，实现了导航栏的粘贴功能，吸顶

截屏2022-07-28 下午11.48.23.png

可以覆盖组件给的样式

截屏2022-07-28 下午11.52.00.png

8.封装组件，引入组件

1.我们需要在HOME页面引入组件，所以在HOME里创建组件文件

组件的使用四四步：创建，引入，注册，使用截屏2022-07-30 上午12.41.24.png 截屏2022-07-30 上午12.50.12.png 组件中定义一个：list 传入值截屏2022-07-30 上午1.31.18.png 在组件中定义一个props存储数据截屏2022-07-30 上午1.33.33.png 保持循环后再将值传给子组件，这里接收的是一个对象截屏2022-07-30 上午1.36.20.png 样式如图截屏2022-07-30 上午1.58.05.png

9.dayjs 工具函数

处理时间问题的函数工具，封装个工具函数处理计算还有多久时间之前

// 封装专门处理时间的函数
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh'

/**
 * .....多久之前
 * @param {*} 之前的时间
 * @returns 系统时间到之前指定时间的距离值
 */
export const timeAgo = (targetTime) => {
    // 格式化时间
    dayjs.extend(relativeTime)
    dayjs.locale('zh')
    var a = dayjs()
    var b = dayjs(targetTime)
    return a.to(b) // 返回多久之前...
}

引入一个函数体不能直接使用，在methods中定义一个方法名截屏2022-07-30 下午5.44.37.png

使用函数体获得内容截屏2022-07-30 下午5.45.04.png

为了index不是共用一个ArticleList，而是每个导航都有各自的ArticleList，所以传递一个id在ArticleList组件中进行请求

截屏2022-07-30 下午6.40.13.png

截屏2022-07-30 下午6.40.45.png

10 上拉加载

截屏2022-07-30 下午10.35.57.png 截屏2022-07-31 下午2.02.06.png 上拉加载的数据触发load事件截屏2022-07-31 下午1.54.27.png 收集下一轮时间戳进行循环请求数据截屏2022-07-31 下午2.03.10.png 注意数据的合并，此时的数据应该是当前请求到的数据已经上次数据的总和的展示

当请求结束后应该关闭加载状态，提示数据为空截屏2022-07-31 下午2.04.33.png 样式如下：截屏2022-07-31 下午2.10.35.png

注意此时的key出了问题，网页打开的时候created和onload都被执行了，数据重复了，导致key重复了

原因是：第一页数据是网络请求得来的，标签先挂载了，数据回来更新DOM，所以标签没有高度，list的load事件上来就触发

解决方法1：截屏2022-07-31 下午2.20.53.png

解决方法2: 在onload函数里数组进行判断，因为onload的执行是在created之前执行的

截屏2022-07-31 下午2.52.30.png

11.下拉刷新

1.目标：将原有数据清空，重新加载新的数据

截屏2022-08-01 上午10.38.37.png

12 反馈面板使用

1.实现样式截屏2022-08-01 下午1.42.46.png

2.实现代码，使用了van-action-sheet

截屏2022-08-01 下午1.44.34.png

3.为了方便使用封装面板内容截屏2022-08-02 上午10.28.54.png report.js内容截屏2022-08-02 上午10.29.15.png 触发的事件，对应的面板内容点击变不同的内容，直接赋值实现截屏2022-08-02 上午10.43.28.png

//默认情况下点击选项时不会自动收起，可以开启close-on-click-action属性开启自动收起
//点击取消的底部按钮，改变当前面板的列表以及他的标题

截屏2022-08-02 下午5.23.07.png

4.采用子传父的方式进行传递函数$emit 截屏2022-08-04 上午9.19.04.png 定义函数接收传递来的函数截屏2022-08-04 上午9.21.52.png 函数实现截屏2022-08-04 上午9.22.40.png

12.axios响应拦截器

axios的中文文档可以看出拦截器的使用

截屏2022-08-04 下午1.57.47.png 复制到request.js页面上

响应拦截器里做什么事呢？

-判断接口返回的状态码，根据状态码对不同的数据进行处理

-过期身份就重新登录截屏2022-08-04 下午3.59.29.png

-请求拦截器截屏2022-08-04 下午5.23.55.png

13.数组中去除重复的对象

思想：filter过滤出符合条件的数组对象（两个数组去重）

uncheckChannelList() {
      // 目标在全部频道里将用户选择的频道以外的频道收集到一个新的数组里
      const newarry = this.allChannelList.filter((all) => {
        const index = this.userChannelList.findIndex((user) => {
          return user.id === all.id;
        });
        if (index > -1) {
          //找到了
          return false;
        } else {
          return true;
        }
      });
      return newarry;
    },

14.简写

通过isEdit控制变量的文字和不同状态

<span>
 我的频道
<span class="small-title">
 点击{{ isEdit ? "删除" : "进入" }}频道
</span>
</span>
<span @click="handleEdit">{{ isEdit ? "完成" : "编辑" }}</span>

15.computed很香

addChannel(obj) {
      this.userChannelList.push(obj);
      // 为什么只需要push 不需要从下面数组进行移除操作？
      //  -因为是computed里的数组，具有响应性只要数据发生变化就会自己进行调用重新计算
    },

移动端的vant学习1