Vuejs技术栈--遇到的问题

Posted 2020-11-17 xiaohuai

数据渲染时，三层表达式如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

测试接口