vue的踩坑路
------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径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'))/*其实只有这一行,特别注意,这个不加拿不到json*/ var uri = 'http://localhost:' + port
...
------->拿不到图片,因为webpack打包后文件的名字可能会改变,so要看webpack的配置文件
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
/* name: utils.assetsPath('img/[name].[hash:7].[ext]')这个会改变图片的名字*/
name: utils.assetsPath('img/[name].[ext]')
}
}
------->数据里面的值有一些有有一些没有,如下这种
[{
"gname":"小米MIX3",
"price":"3499",
"img":"http://localhost:8082/static/img/mix5.png",
"goods_des":"OLED 显示屏幕,升级计步算法",
"review":"听说小米客服美眉很厉害送我一首藏头诗可好我爱钱天玉",
"review_author":"来自橙子的"
},{
"gname":"小米MIX4",
"price":"3499",
"img":"http://localhost:8082/static/img/mix5.png",
"goods_des":"6.4 全面屏,全陶瓷机身"
}]
好,for循环的时候就要在相应的地方加上判断
<li v-for="(item,index) in arrList" class="goods-list-item">
<span class="flag flag-new">{{item.flag}}</span>
<a href="#" 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的踩坑路的更多相关文章
- Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...
- 微信小程序 请求签名接口超时 踩坑路。。
我们公司一般做开发都是先用测试机的接口调试功能,等功能都调试的差不多了,再换成线上的正式接口,因为正式接口要验证签名. 这几个功能都调试的差不多了,准备换成线上正式接口了,结果却出了问题,提示请求超时 ...
- html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- vue 使用踩坑 note
1. 如图,假如large那一行错写成 'large': item.ext_data.isLarge + '' === 'true',, 那么,编译不报错,控制台无提示,模板不输出. 2. vue的t ...
- vue+canvas踩坑之旅
let img=new Image(); if(img.complete) { console.log('dd'); } img.src="http://localhost:8888/sta ...
- vue安装踩坑系列
1.安装npm node环境 2.npm install vue-cli -g 安装vue-cli vue-V检测脚手架是否安装成功 3.vue init webpack vuecliTest 初始化 ...
随机推荐
- Fedora21 安装视频播放解码器
12 12月 2014年12月12日 Posted by 涛儿 2 首先启用RPM Fusion软件源: sudo rpm -ivh http://download1.rpmfusion.org/fr ...
- Scrapy爬虫入门系列2 示例教程
本来想爬下http://www.alexa.com/topsites/countries/CN 总排名的,但是收费了 只爬了50条数据: response.xpath('//div[@class=&q ...
- Struts2 实例(转载)
一.准备工作及实例 1.解压struts-2.1.6-all.zip apps目录:struts2自带的例子程序docs目录:官方文档. lib 目录:存放所有jar文件. Src 目录:源文件存放地 ...
- OpenCV 的四大模块
前言 我们都知道 OpenCV 是一个开源的计算机视觉库,那么里面到底有哪些东西?本文将为你解答这个问题. 模块一:CV 这个模块是 OpenCV 的核心,它包含了基本的图像处理函数和高级的计算机视觉 ...
- POJ 2263 Heavy Cargo(ZOJ 1952)
最短路变形或最大生成树变形. 问 目标两地之间能通过的小重量. 用最短路把初始赋为INF.其它为0.然后找 dis[v]=min(dis[u], d); 生成树就是把最大生成树找出来.直到出发和终点能 ...
- TEA对称加密算法
今天在看<Distributed Systems Concepts and Design>这本书的时候,在讲到分布式系统的安全性的时候,给出了TEA算法,书本上有现成的代码,所以摘录下来以 ...
- [转]***换机房换ip之后不能连外网
***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- c# vs2010 连接access数据库
第一次在博客园写博文,由于文采不怎么好,即使是自己很熟悉的东西,写起来也会感觉到不知从何讲起,我想写的多了就好了. 这篇文章主要是介绍怎么用c# 语言 vs2010连接access数据库的,连接字符串 ...
- Debug 和 Release 的区别
Debug 和 Release 的区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发布版本,它往往是进行了各种优化,使得程 ...