移动端网页开发（二）

一、使用axios获取ajax情求

安装axios

$npm install axios --save

二、Better-scroll的使用及字母表布局

Better-scroll可以实现列表页拖动

1.安装better-scroll

$npm install better-scroll --save

2.在gitup上找到符合使用better-scroll的DOM结构对列表代码进行封装

import Bscroll from 'better-scroll'  //引入
export default {
  name: 'CityList',
  mounted () {   //生命周期函数进行声明
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}

三 、页面的动态数据渲染

四、Vuex实现数据共享

1.安装vuex

npm install vuex --save

 vuex解决因为没有父级组件导致数据无法共享。vuex是vue中官方推荐的一个数据框架，vue只能承担视图层的主要功能，而我们使用大量数据进行传递的时候往往都需要一个数据框架进行辅助。

2. vuex的设计理念：

当我们项目之中的各个组件或者页面需要进行复杂的数据传值，把公共数据放入到公共存储空间中进行存储然后某一个组件改变公共数据其他组件也能感知到这一变化。

3.State:存放所有的公用数据。组件想要使用公用数据直接调用这个公用数据就可以了

Actions:存放异步操作或者一些比较复杂的同步操作或批量操作

Mutations:存放的是一个个同步的对State的修改

4.如何改变State中的数据：

不能直接让组件去改变公用数据，必须走一个流程：组件先调用Actions，Actions紧接着调用Mutations，只有通过Mutations才能改变公用数据的值；或者组件直接调用Mutations方法修改State里面的数据。

注意：当组件调用Actoins时，我们调用的是一个Dispatch方法来操作Actions，然后组件调用或者Actions调用Mutations需要使用Commit方法来操作Mutations

四、localStorage（类似于Cookie实现本地存储的功能）

使用localStorage时要使用try-catch捕获异常

五、使用keep-alive优化网页性能

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

    在路由项外部包裹一层<keep-alive>标签，意思为：路由的内容被加载之后，就把路由的内容放到内存当中，下一次在执行这个路由的时候不需要重新渲染这个组件，也不需要重新去执行钩子函数，只需要从内存中拿出之前的内容显示出来就可以了。