第7章项目实战 - 旅游网站首页开发

                 header区域开发

去哪儿网手机：http://touch.piao.qunar.com/
1rem= html font-size
如果font-size=50px，43px是.86rem
在build-->webpack.base.conf.js里面可以配置路径，例：@代码src，如果在style里面调用，需要在前面加~

image.png

scoped：加载以及影响当前的组件，可以使得组件之间的样式不互相污染
但是往往有时候，我们在使用一些第三方插件的同时，又需要对第三方插件做一些细微的修改，那么我们就可以使用下面的方法(scss穿透)：
scss穿透：/deep/

.wrapper /deep/ {
  .swiper-pagination-bullet-active {
    background: #fff;
  }
}

                首页轮播图

swiper的使用：https://www.cnblogs.com/maomao93/p/6830626.html
轮播插件在github搜索：vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
安装：npm install vue-awesome-swiper@2.6.7 --save
@2.6.7是版本号
在<script>里面需要加require才能获取图片路径
当网络处于3G时，swiper图片未加载，会出现抖动的效果，所以必须给swiper加上高度

overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 31.25%;
background: #ccc;

这里的31.25%是图片得宽度200px，高度640px的比例得出的。

<swiper-slide v-for="item of swiperList" :key="item.id">
  <img class="swiper-img" :src="item.imgurl"/>
</swiper-slide>

swiperList: [{
        id: '001',
        imgurl: require('@/assets/img/meinvyeshou.jpeg')
      }, {
        id: '002',
        imgurl: require('@/assets/img/guangzhouchanglong.jpeg')
      }]

参考资料：https://blog.csdn.net/u012123026/article/details/78203799
loop: true 循环轮播，不加如果左边没有图片，拖动会出现空白

swiperOption: {
  pagination: '.swiper-pagination',
  loop: true
 }

                使用 axios 发送 ajax 请求

axios API：https://www.kancloud.cn/yunye/axios/234845
安装axios：npm install axios --save

首先在大组件中引入 axios，比如header，hearder里面有很多组件组成import axios from 'axios'，然后调用mounted生命周期钩子

引用json路径，修改config 中的index配置
1、在整个的项目目录，只要static目录下的文件才能被外部访问，所以我们在static下创建json文件夹，创建index.json文件
2、如果不想把json数据上传到线上git和本地git仓库，在gitgnore文件中添加static/json
3、因为代码上线ajax需要用(api/index.json)格式的，所以需要配置路径，而不是static/json/index.json
4、proxyTable配置项，在config->index.js配置路径
proxyTable配置:https://blog.csdn.net/qq_33559304/article/details/72966028
5、json文件，"ret":ture 服务器正确响应了你的请求

axios tiis指向问题

错误代码：

data () {
    return {
      city: ''
    }
  },
  methods: {
    getHomeinfo () {
      axios.get('/api/index.json')
        .then(function (res) {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.city = data.city
          }
        })
    }
  },
  mounted () {
    this.getHomeinfo()
  }

'city' of undefined原因：this的指向变了，以下是解决的办法

  methods: {
    getHomeinfo () {
      var this_ = this
      axios.get('/api/index.json')
        .then(function (res) {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this_.city = data.city
          }
        })
    }
  },

箭头函数了解一下

  methods: {
    getHomeinfo () {
      axios.get('/api/index.json')
        .then((res) => {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.city = data.city
          }
        })
    }
  },

最后编辑于：2018.09.12 22:56:12

第7章 项目实战 - 旅游网站首页开发

axios tiis指向问题

第7章项目实战 - 旅游网站首页开发