慕课vue去哪儿网学习在css里面，padding-top,padding-bottom,margin-top,marg

移动端项目

引入reset.css 重置样式
引入border.css 解决1px边框问题
引入fastClick解决某些情况下移动端点击事件300毫秒延迟问题

使用stylus开发

安装stylus

npm install stylus --save

安装stylus-loader

npm install stylus-loader --save

<style lang="stylus" scoped>

scoped:以表示它的样式作用于当下的模块

1rem=html font-size

在style标签中引入其他样式文件需要

@import  ‘~路径’

首页轮播图

使用vue-awesome-swiper

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。 margin/padding的百分比值实现高度的自适应可以占位避免闪烁

当设置文字省略号无效时可以给父级尝试设置

min-width:0

ajax使用axios

npm install axios --save

配置本地json文件

ajax访问路径 config>index.js 文件

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },

城市选择页面上下滚动使用better-scroll 模拟原生App滑动

npm install better-scroll

scroll.scrollToElement(element) 使页面跳转到指定的dom元素位置手机访问城市页面点击城市没反应的问题解决方式： new Bscroll 的时候加一个参数

click: true . new Bscroll({click: true})

组件递归在组件内部调用自身

解决keep-live使用之后的问题

解决方法1：

使keep-alive新增的一个生命周期函数activated（实际上还有一个对应的deactivated函数），这个函数和mounted相比，mounted只执行一次，activated在每一次页面跳转的时候都会执行

解决方法2：

在keep-alive标签中，对每次都需要重新请求的页面或者组件做特殊处理

在使用这种方法后，由于你对Detail页面做了特殊处理，所以Detail页面中的activated和deactivated函数是不会执行的，因此，如果你使用了activated和deactivated函数，请更换成beforeMount和beforeDestroy

解决首页滚动点击详情页页面也是滚动状态方法:

router.vuejs.org/zh/guide/ad…

组件过渡过程中，会有六个CSS类名进行切换，这六个类名与上面transition的name属性有关，比如name="fade"，会有如下六个CSS类名：

fade-enter：定义进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
fade-enter-active：定义过渡的状态，元素被插入时就生效，在过渡过程完成之后移除；
fade-enter-to: 定义进入过渡的结束状态。在元素被插入一帧后生效
fade-leave：定义离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
fade-leave-active：定义离开过渡的状态，元素被删除时生效，离开过渡完成之后被删除；
fade-leave-to:定义离开过渡的结束状态。在离开过渡被触发一帧后生效

    transition: all 0.5s
    &.fade-enter-avtive, &.move-leave-active     定义动画的过程中的透明度
        opacity: 1
    &.fade-enter, &.move-leave-to  定义动画的开始与动画结束的透明度
        opacity: 0

如果未定义name 则以上fade改为v

transition一般与v-if v-show一起使用

单元素-组件的过渡

cn.vuejs.org/v2/guide/tr…

scrollTop值兼容写法

var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

解决手机不支持Promise导致的页面白屏安装 babel-polyfill

npm install babel-polyfill --save

babel-polyfill 会判断浏览器是否支持promise 不支持会自动添加

慕课vue去哪儿网学习