浅谈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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
多文件上传的例子
2006/10/09 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
ES6的新特性概览
2016/03/10 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
为什么要用EJB
2014/04/17 面试题
幼儿园教师培训制度
2014/01/16 职场文书
优秀员工评语
2014/02/10 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年元旦标语大全
2014/12/09 职场文书
人民的好儿女观后感
2015/06/18 职场文书
毕业证明模板
2015/06/19 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python