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

2.城市列表页开发

功能点概述
1. 页面路由跳转(Home -> City): 点击首页城市选择按钮，即可跳转至城市列表页。
2. 用户可以在搜索栏中可输入信息进行城市信息的检索，检索结果以列表形式展现，选定城市后会进行首页的路由跳转。
3. 用户可以在热门城市、字母城市列表中选择城市信息，选定城市后会进行首页的路由跳转。
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下文将对以下内容进行增量细节补充)
  - <template>
```
  <template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list></city-list>
    <city-alphabet></city-alphabet>
  </div>
  </template>		
```
  - <script>
    - 引入组件
```
  import axios from 'axios'
  import CityHeader from './components/Header.vue'
  import CitySearch from './components/Search.vue'
  import CityList from './components/List.vue'
  import CityAlphabet from './components/Alphabet.vue'
```
    - 声明组件
```
  components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
  }
```
- 组件交互(City、Home)
  
  路由跳转：<router-link>
  
  这里所提到的组件交互，对应: 功能点1
  
  从外层看是Home组件和City做了交互，实质上是Home的Header组件与City.Header组件发生了交互。即：页面路由跳转
  
  为了方便叙述，当前模块中提及其他模块时均采用：otherComponent.childComponent 形式标明
  - Home.Header
```
  
  <router-link to="/city">
      <div class="header-right">
         // 内容省略
      </div>
  </router-link>
```
  - Header
```
  <router-link to="/">
    <div class="iconfont header-back">&#xe624;</div>
  </router-link>
```
  - 细节配置补充1：采用<router-link>标签后，作用于DOM套上<a>标签等同，此时内部<div>的样式会无效，解决此类问题两种方法。
    - style变更
      
      例如：上述Home.Header中<div class=“header-right”>，该类选择器对应的样式无效，可以在该组件的style区域进行样式变更
    - <router-link>标签中tag属性
```
  有时候想要 <router-link> 渲染成某种标签。
  例如 <li>：  
  <router-link to="/foo" tag="li">foo</router-link>
  
  <li>foo</li>
```
      更改之后的标签依然会沿用原样式，根据class做样式绑定、事件监听等操作。

数据传递：通过axios发送数据请求，该操作在父组件City中，统一进行数据请求和数据处理。

数据存放

  	data() {
  	    return {
  	      cities: {},
  	      hotCities: [],
  	      // 存储alphabet中的letter
  	      letter: ''
  	    }
      },

数据获取与处理

请求方法：数据获取

  getCityInfo() {
    axios.get('/api/city.json').then(
      this.handleGetCityInfoSucc
    )
  },

成功回调函数：数据处理

  handleGetCityInfoSucc(res) {
    res = res.data
    if (res.ret && res.data) {
      const data = res.data
      this.cities = data.cities
      this.hotCities = data.hotCities
    }
  },

钩子函数调用：组件渲染时自动调用
```
  mounted() {
 		this.getCityInfo()
	}
```

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

2.城市列表页开发

路由跳转：<router-link>

猜你喜欢