【Vue项目】三、去哪儿网APP——城市列表页面开发

使用router-link实现页面的跳转

<router-link to='/city'>
//点击后跳转的控件
</router-link>

注意：加了这个组件之后，需要重新设置字体颜色，因为组件中包含一个链接，链接本身设置了字体颜色。

使用Better-scroll第三方包实现拖动

1. 首先，GitHub上搜索相关资源：better-scroll，了解相关内容。
2. 安装better-scroll：npm install better-scroll --save
3. 引入better-scroll：import Bscroll from 'better-scroll'
4. 使用vue中的ref属性来获取DOM元素。
   在List.vue中，总组件需要有一个div包裹住其他的组件，并且在这个div上加上ref属性：

<div class="list" ref="wrapper">

5. 使用mounted()函数，在页面DOM挂载完毕的时候，创建better-scroll实例属性，并将wrapper传进去：

mounted () {
   
    this.scroll = new Bscroll(this.$refs.wrapper, {
   click: true})
  }

注意：在使用better-scroll时，会使click事件失效
原因：better-scroll 默认会阻止浏览器的原生 click 事件。
因此，需要我们在创建实例属性时，将click属性设置为true。

使用axios实现页面数据的动态渲染

通过axios来动态获取数据，做法与前一部分的首页开发一样，不再赘述。

实现点击字母表某个字母，跳转到相应字母的城市列表项（兄弟组件间联动）

1. 首先，要实现兄弟组件间的传值，则可以采取以下方法：
   （1）首先，将Alphabet.vue的letter值传递给父组件City.vue；
   （2）接着，父组件接收子组件Alphabet.vue传递过来的值，并将该值传递给子组件List.vue
2. 在Alphabet.vue中，绑定click事件函数，在事件函数中，使用$e在这里插入代码片mit()函数触发父组件自定义事件，并将letter值传过去：
   （1）div上：@click="handleLetterClick"
   （2）事件函数：

handleLetterClick (e) {
   
      this.$emit('change', e.target.innerText)
    },

3. 父组件City.vue中，在data中定义letter属性，并设值为空，在change事件所绑定的函数中，接收letter值，并设置为自定义的letter值，最后将自定义的letter值传递给子组件List.vue：
   （1）change事件绑定函数：

<city-alphabet :cities='cities' @change="handleLetterChange"></city-alphabet>

（2）data中定义letter值：

data () {
   
    return {
   
      letter: ''
    }
  },

（3）事件函数：

handleLetterChange (letter) {
   
      this.letter = letter
    }

（4）将自定义的letter值传递给子组件List.vue：

<city-list :hot='hotCities' :cities='cities' :letter="letter"></city-list>

4. 子组件List.vue中，接收父组件传来的letter值，借助监听器，当letter值改变时，调用better-scroll提供的接口：scrollToElement()：让better-scroll自动滚到某个元素上。
   （1）在props接收父组件的值：

props: {
   
    letter: String
  },

（2）借助监听器，监听letter值的改变：只要letter发生变化，就会执行该函数。
首先，在列表区域通过ref属性获取相应字母列表DOM元素：

<div class="area" v-for="(item,key) of cities"