vue去哪儿项目实战笔记1

1.样式中去引用样式，需要用到@
如在header.vue中引用varibles.styl，需要@import’…/…/…’

2.父 display:flex
子 flex：1 代表撑开盒子剩下的部分

3.轮播用到：vue-awesome-swiper 在github中搜索

4.css中固定宽高比： overflow: hidden height:0 padding-bottom: 固定比例，如31.25%

5.当样式被scoped固定时，需要将父类名向下进行穿透，如.swiper >>> .swiper-pagination-bullet-active

6.v-bind中要设定k值

7.手机端实现上下滚动 git官网搜索“better-scroll”

8.css中 竖向居中设置方式 display：flex，flex-direction：column，justify-content：center

9.使用<router-link>时，vue会将<router-link>渲染成a标签，如不想被渲染成a标签，可用tag="li"，则标签具有<router-link>的功能并且结构为li标签。

10.动态路由 path: '/detail/:id' 用冒号后面加变量的形式添加

11.添加渐变色 background-image ：linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))

12.swiper轮播中，通过点击事件后，宽度可能重新计算，产生轮播异常的问题，解决方法：

observeparents: true,
        observer: true

可以在点击事件后，重新自我刷新一次，重新计算宽度，解决轮播滑动异常问题。

13.addEventListener() 方法，事件监听

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

**

14 axios传值：

**
（1）先在script中引入axios： import axios from ‘axios’
（2）在mounted中挂载函数，如：

mounted （） {
                this.getDetailInfo( )  
	         }

(3) 在methods中设定函数 如：

methods：{
	    getDetailInfo () {
	    axios.get('/api/detail.json')   //显示传值的数据位置
	    .then(this.handleGetDataSucc)   //输出结果
	    }，
	   handleGetDataSucc（res）{
	     res = res.data
	     if(res.ret && res.data) {
	      const data = res.data
	      //接下来可以传输数据
	     this.sightName = data.sightName
	      }
	    }
 }

(4) 在data中定义数据：

 data （）{
     return （）{
        sightName:''    //根据实际数据类型选取 ‘ ’  和 []
     }
}

(5) 将获取的数据传给相应的组件
在相应组件div中绑定数据 使用 ：sightName=“sightName”
（6） 在组件中获取数据
在script中

props： {
    sightName：String   //设置类型
}

并在相应div区域中设置绑定值。

15.当不需要keep-alive作缓存时，可以在keep-alive中使用exclude排除此vue。

<keep-alive exclude="detail">

此时detail中的mounted钩子每次都会执行。

16.取消每页之间的拖动关联：

scrollBehavior (to, from, savePosition) {
    return { x: 0, y: 0}
  }