浅谈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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Django框架model模型对象验证实现方法分析
2019/10/02 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
初二生物教学反思
2014/02/03 职场文书
职业生涯规划书前言
2014/04/15 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫