Vue.js学习记录-11-Vue去哪儿网项目实战:城市列表页开发-功能点概述 + City

2.城市列表页开发

  • 功能点概述

    1. 页面路由跳转(Home -> City): 点击首页城市选择按钮,即可跳转至城市列表页。
      Vue.js学习记录-11-Vue去哪儿网项目实战:城市列表页开发-功能点概述 + City_第1张图片
    2. 用户可以在搜索栏中可输入信息进行城市信息的检索,检索结果以列表形式展现,选定城市后会进行首页的路由跳转。
      Vue.js学习记录-11-Vue去哪儿网项目实战:城市列表页开发-功能点概述 + City_第2张图片
    3. 用户可以在热门城市、字母城市列表中选择城市信息,选定城市后会进行首页的路由跳转。
      Vue.js学习记录-11-Vue去哪儿网项目实战:城市列表页开发-功能点概述 + City_第3张图片
    4. 用户可以在城市列表页右侧的字母导航条中进行点击具体字母项进行准确的城市信息定位,也可以通过上下拖动字母表导航条进行字母城市列表的随动检索。
      Vue.js学习记录-11-Vue去哪儿网项目实战:城市列表页开发-功能点概述 + City_第4张图片
    5. 用户选定的城市信息将通过内存进行保存,并且选定的城市信息将展示在首页Header右侧的城市信息展示区域和城市列表页的当前城市信息展示区域中。
  • TIPS:下文提到的分组件开发采取的形式为:增量式的记录形式,针对组件中的代码改进进行额外说明。

  • City:父组件 (增量式)

    • 路由配置

      1. 坐标:router/index.js
        • 引入组件:import City from '@/pages/city/City'
        • 配置路由项
          { path: '/city', name: 'City', component: City }
    • 组件管理(Header、Search、List、Alphabet下文将对以下内容进行增量细节补充)