vue2.0開發(fā)常見問題
1、scoped能让样式只作用在当前组件内
<style lang="scss" scoped>
</style>
2、wepack对img src的编译问题
webpack对各种类型的文件支持的很完美,但是对于img src引入的图片资源却是无法解析。对于img v-bind:src引入的图片资源,webpack只能解析为字符串并不能够很好的编译。对此搜罗了一些解决方法
1)就是直接避免使用img ,有img的地方改为用div,或者其他标签写成background的方式
2)采用require模块的方式引入,比如如下:
<div class="goodsItem" v-for="x in goodsList" :key="x.goodsId">
<img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.img" alt="">
<p class="goodsName">{{x.goodsName}}</p>
<p class="goodsPrice">¥{{x.goodsPrice}}</p>
<div class="addCartBtn">加入购物车</div>
</div>
这边原本是想要循环goodsList里面的数据,将里面的商品图片goodsImg循环出来判断到img src属性上,但是这样做webpack不识别,只能够对原始数据处理,采用require的方式重新定义了,如下:
for(var i=0;i<res.data.goodsList.length;i++){
_this.goodsList[i].img = require('../../public/images/'+res.data.goodsList[i].goodsImg)
}
3、axios的引入
axios使用不能像vue-rosurce一样,直接使用vue.use()这种方式,但是我们可以将axios绑定在Vue.prototype原型链上,然后调用的使用this.method类型的方式来调用
Vue.prototype.$ajax = axios
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦