![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 64
「已注销」
这个作者很懒,什么都没留下…
展开
-
本地服务器上json文件无法读取
做vue的axios获取数据后台的时候res服务器数据一直找不到或不存在但是json文件格式没有错误,引用路径也没有写错,axios也通过npm安装好了,但是一直无法获取到数据然后想到是需要挂在服务器上才有res数据,就放在localhost的本地服务器上但是res数据还是无法获取最后在localhost里打开我的json文件,发现里面没有内容猜想是服务器无法解析json数据,就上网查到了解决方法...原创 2018-04-09 17:24:16 · 5380 阅读 · 0 评论 -
Vue音乐--排行榜页面07_抓取详情页数据
大概步骤:目标效果二、抓取排行榜详情页数据要点进入QQ音乐移动端,查找Network中的排行榜首页数据,在XHR中找到使用之前写好的jsonp解析数据的方法,传入处理好的url点击事件传入点击的排行榜idjsonp数据url数据相关代码import jsonp from '@/common/js/jsonp' //引入jsonp模块import {co...原创 2018-10-06 14:40:44 · 747 阅读 · 0 评论 -
Vue音乐--排行榜页面06_详情页面布局
大概步骤:目标效果六、新建排行榜详情页 HTML布局要点:使用滑动动画引用封装好的公共组件musiclist即可传入从store中的数据,进组件中引用加载中组件 <transition name="slide"> <div class="rank-detail"> <music-li原创 2018-10-06 12:52:29 · 695 阅读 · 0 评论 -
Vue音乐--排行榜页面05_详情页vuex数据
大概步骤:目标效果五、配置排行榜详情页面vuex数据要点:在store文件夹中定义相关的state、mutations、getters、mutation-types数据分为:排行榜首页点击存入数据mutation排行榜详情页读取数据state(1)配置store# store-->state.jsconst state = { /*排行榜数据*/ t...原创 2018-10-06 12:22:50 · 864 阅读 · 0 评论 -
Vue音乐--排行榜页面04_详情页面路由
大概步骤:目标效果四、配置排行榜详情页面路由# router-->index.js 配置子路由{ path: '/rank', name: 'Rank', component: Rank, children:[{ //配置动态子路由 path: '/rank/:id', name: 'RankDe...原创 2018-10-06 11:56:54 · 539 阅读 · 0 评论 -
Vue音乐--排行榜页面03_添加已写公共组件
大概步骤:目标效果三、排行榜首页添加公共组件要点:“滚动”组件“加载中”组件“mixin”重复逻辑js滚动组件<!--scroll是插槽组件,可为它添加class,写上固定页面的定位,传入data用于refresh滚动组件--><scroll class="rank" :data="..." ref="scroll&原创 2018-10-06 10:59:05 · 897 阅读 · 0 评论 -
Vue音乐--排行榜页面02_抓取首页数据
大概步骤:目标效果二、抓取排行榜首页数据要点进入QQ音乐移动端,查找Network中的排行榜首页数据,在XHR中找到使用之前写好的jsonp解析数据的方法,传入处理好的urljsonp数据url数据相关代码import jsonp from '@/common/js/jsonp' //引入jsonp模块import {commonParams,objec...原创 2018-10-06 10:37:22 · 648 阅读 · 0 评论 -
Vue音乐--排行榜页面01_页面布局
大概步骤:一、新建排行榜首页HTML布局要点:灵活使用到flew布局左右布局(图片文字)上下布局(文字中的li)<div></div>二、获取排行榜首页数据 是jsonp方法,获取到XHR数据三原创 2018-10-06 10:00:26 · 1950 阅读 · 0 评论 -
Vue音乐--搜索页面12_清空按钮弹窗页面
大概步骤:目标效果十二、弹窗页面要点:弹窗样式布局公共组件,外部可控性(一)、点击垃圾桶show弹窗页面为了不在没必要的地方渲染,不想以前那样用v-show标识来打开,而是在弹窗页面的组件中设置内置方法↓searchHistory.vue<!--弹窗组件--> <confirm ref="confirm" co...原创 2018-10-11 17:29:27 · 388 阅读 · 0 评论 -
vue初学— —HelloWord
vue框架的搭建和配置,这里不说当我们需要利用vue框架创建一个项目的时候创建项目:在当前项目文件夹下 运行命令行工具当前文件夹下 shift+右键 “在此处打开命令窗口”输入npm install vue安装完成后出现node_modules文件夹和json创建hellow.html项目步骤:Vue数据、视图双向绑定1、引入vueCDN网址引入(项目将需要联网)手动下载到电脑(项目不用联网)2、...原创 2018-04-06 22:57:13 · 2965 阅读 · 1 评论 -
Vue音乐--排行榜页面08_优化
大概步骤:目标效果八、优化要点:给排行榜歌曲列表添加排名符号刷新的时候返回路由rank详情页面头部图片换成第一首歌曲的图片(排行榜图片有字不适用)收费歌曲,无法播放,获取不到url,弹出弹窗排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据(1)歌曲列表添加排名符号因为是公共组件,所以,以父子组件传入标记为是否show在公共组件中加入相关do...原创 2018-10-06 15:23:49 · 2173 阅读 · 0 评论