浅谈vue的踩坑路


Posted in Javascript onAugust 31, 2017

------>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]')
 

}<br>}

------->数据里面的值有一些有有一些没有,如下这种

[{
 "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="#" 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的踩坑路就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
node.js中的console用法总结
Dec 15 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
js之ajax文件上传
May 13 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 #Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 #Javascript
基于JSON数据格式详解
Aug 31 #Javascript
浅谈js中的this问题
Aug 31 #Javascript
js实现图片放大展示效果
Aug 30 #Javascript
详解js几个绕不开的事件兼容写法
Aug 30 #Javascript
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
JavaScript修改css样式style
2008/04/15 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
js Function类型
2011/12/04 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python实现简单登陆系统
2018/10/18 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python基于property()函数定义属性
2020/01/22 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
个人自我剖析材料
2014/02/07 职场文书
金融管理专业求职信
2014/07/10 职场文书
无房证明范本
2014/09/17 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
慰问信格式
2015/02/14 职场文书
2016新年问候语大全
2015/11/11 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
如何使用flask将模型部署为服务
2021/05/13 Python