Vuejs技术栈--遇到的问题

数据渲染时,三层表达式如a.b.c需要思考一下会不会出现 undefined.属性的问题

解决办法:v-if 


处理原对象中本无属性的情况,需要通过

Vue.set(对象,属性名,属性值)这样才会自动绑定   


通过给路由添加meta的属性

meta: {
  showFooter: true
}
<FooterGuide v-show="$route.meta.showFooter"/>
可以给不同路由器的一些组件进行显示隐藏

将一个数组分成二维数组,一个8个上限
computed: {
  pages () {
    const pages = []
    this.list.forEach((item, index) => {
      const page = Math.floor(index / 8)
      if (!pages[page]) {
        pages[page] = []
      }
      pages[page].push(item)
    })
    return pages
  }
}

图片懒加载: vue-lazyload

下载npm install --save vue-loader

使用

import VueLazyload from 'vue-lazyload'
import loading from './common/img/loading.gif'
Vue.use(VueLazyload, {
  loading
})
<img v-lazy="food.image">

打包可视化: npm run build --report


动画 <transition name="abc">...</transition>

abc-enter-active,abc-leave-active{transition all .3s}

abc-enter,abc-leave-to{transform ...}


better-scroll
解决滚动条问题
postman
测试接口

猜你喜欢

转载自www.cnblogs.com/xiaohuai/p/9170701.html