day02-vuejs项目-商城(2)

新闻资讯 页面 制作

  1. 绘制界面, 使用 MUI 中的 media-list.html
  2. 使用 vue-resource 获取数据
  3. 渲染真实数据

实现 新闻资讯列表 点击跳转到新闻详情

  1. 把列表中的每一项改造为 router-link,同时,在跳转的时候应该提供唯一的Id标识符
  2. 创建新闻详情的组件页面 NewsInfo.vue
  3. 在 路由模块中,将 新闻详情的 路由地址 和 组件页面对应起来

实现 新闻详情 的 页面布局 和数据渲染

单独封装一个 comment.vue 评论子组件

  1. 先创建一个 单独的 comment.vue 组件模板
  2. 在需要使用 comment 组件的 页面中,先手动 导入 comment 组件
  • import comment from './comment.vue'
  1. 在父组件中,使用 components 属性,将刚才导入 comment 组件,注册为自己的 子组件
  2. 将注册子组件时候的,注册名称,以 标签形式,在页面中 引用即可

获取所有的评论数据显示到页面中

实现点击加载更多评论的功能

  1. 为加载更多按钮,绑定点击事件,在事件中,请求 下一页数据
  2. 点击加载更多,让 pageIndex++ , 然后重新调用 this.getComments() 方法重新获取最新一页的数据
  3. 为了防止 新数据 覆盖老数据的情况,我们在 点击加载更多的时候,每当获取到新数据,应该让 老数据 调用 数组的 concat 方法,拼接上新数组

你可能感兴趣的:(day02-vuejs项目-商城(2))