淺談vue的踩坑路
更新時(shí)間：2017年08月31日 08:44:38 作者：PeggyChan
下面小編就為大家?guī)?lái)一篇淺談vue的踩坑路。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
------>axios模擬get json一直拿不到文件，先把data放到根目錄，再去dev-server.js（就是npm執(zhí)行的那個(gè)文件）里面設(shè)置靜態(tài)資源訪問(wèn)路徑app.use('/data',express.static('./data'))
...
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
app.use('/data',express.static('./data'))/*其實(shí)只有這一行，特別注意，這個(gè)不加拿不到j(luò)son*/
var uri = 'http://localhost:' + port
...
------->拿不到圖片，因?yàn)閣ebpack打包后文件的名字可能會(huì)改變，so要看webpack的配置文件
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
/* name: utils.assetsPath('img/[name].[hash:7].[ext]')這個(gè)會(huì)改變圖片的名字*/
name: utils.assetsPath('img/[name].[ext]')
}<br>}
------->數(shù)據(jù)里面的值有一些有有一些沒(méi)有，如下這種
[{
"gname":"小米MIX3",
"price":"3499",
"img":"http://localhost:8082/static/img/mix5.png",
"goods_des":"OLED 顯示屏幕，升級(jí)計(jì)步算法",
"review":"聽說(shuō)小米客服美眉很厲害送我一首藏頭詩(shī)可好我愛(ài)錢天玉",
"review_author":"來(lái)自橙子的"
},{
"gname":"小米MIX4",
"price":"3499",
"img":"http://localhost:8082/static/img/mix5.png",
"goods_des":"6.4 全面屏，全陶瓷機(jī)身"
}]
好，for循環(huán)的時(shí)候就要在相應(yīng)的地方加上判斷
<li v-for="(item,index) in arrList" class="goods-list-item">
<span class="flag flag-new">{{item.flag}}</span>
<a href="#" rel="external nofollow" class="img-wrap">
<img :src="item.img" /><!--或者v-bind:src="item.img"-->
</a>
<h3 class="good-title"><a href="">{{item.gname}}</a></h3>
<p class="good-desc">{{item.goods_des}}</p>
<p class="good-price">{{item.price}}</p>
<p class="review-wrap" v-if="item.review"><!--如果review存在就顯示-->
<a href="">
<span class="review">{{item.review}}</span>
<span class="author">{{item.review_author}}</span>
</a>
</p>
</li>
以上這篇淺談vue的踩坑路就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中使用styled-components的實(shí)現(xiàn)
本文主要介紹了Vue3中使用styled-components的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
在Vue中使用動(dòng)態(tài)import()語(yǔ)法動(dòng)態(tài)加載組件
在Vue中,你可以使用動(dòng)態(tài)import()語(yǔ)法來(lái)動(dòng)態(tài)加載組件,動(dòng)態(tài)導(dǎo)入允許你在需要時(shí)異步加載組件,這樣可以提高應(yīng)用程序的初始加載性能,本文給大家介紹在Vue中使用動(dòng)態(tài)import()語(yǔ)法動(dòng)態(tài)加載組件,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
el-tree?loadNode懶加載的實(shí)現(xiàn)
本文主要介紹了el-tree?loadNode懶加載的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項(xiàng)目、引入?bimface?響應(yīng)的文件、修改?App.vue?文件，實(shí)現(xiàn)頁(yè)面渲染等步驟，需要的小伙伴可以參考一下2021-12-12
利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
詳解element-ui表格中勾選checkbox，高亮當(dāng)前行
這篇文章主要介紹了詳解element-ui表格中勾選checkbox，高亮當(dāng)前行，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家介紹了JointJS流程圖的繪制方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Vue 實(shí)現(xiàn)樹形視圖數(shù)據(jù)功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡(jiǎn)單的樹形視圖實(shí)現(xiàn)的，在實(shí)現(xiàn)過(guò)程中熟悉了組件的遞歸使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05