随笔分类 -  VUE从0开始踩坑

公司要开新项目vue，先来进行知识储备和学习。
vue2.0：（十）、外卖App商品组件部分和better-scroll
摘要：本篇中继续来给大家介绍外卖App制作中的商品组件的部分。 好，第一步，我们把商品的大致框架在goods.vue中搭建出来： menu-wrapper是左边菜单栏，foods-wrapper是右边商品栏。 第二步，我们需要取到我们需要的数据。 可能有人这时候会有一点疑问，因为他们记得header里面的 阅读全文
posted @ 2018-04-09 15:04 Beyrl.pan 阅读(1464) 评论(0) 推荐(0)
vue2.0：（九）、外卖App弹窗部分星星评分
摘要：本篇是星星评分部分，先上代码： 1.header.vue： 2.star.vue： 阅读全文
posted @ 2018-04-08 14:56 Beyrl.pan 阅读(1167) 评论(0) 推荐(0)
vue2.0：（八-2）、外卖App弹窗部分sticky footer
摘要：什么是sticky-footer ？ 如果页面内容不够长的时候，页脚块粘贴在视窗底部，如果内容足够长时，页脚块会被内容向下推送。那具体要怎么做呢？下面以外卖App为例： 第一种方法：这个自己用过，是好使的，剩下的第二种方法是在网上找的，但是我没有用过。 1、基本布局： 代码： css代码: 第二种方 阅读全文
posted @ 2018-04-08 14:13 Beyrl.pan 阅读(585) 评论(0) 推荐(0)
vue2.0：（八）、外卖App弹窗部分知识点总结
摘要：本篇文章是对外卖App弹窗部分知识点的总结。 知识点一：如何从接口取出不同的图片。 答： 1、header.vue: 代码： json数据格式： css： tip 1: 方法是，在li循环里面更改相应的class名字。 tip 2: 在script里面设置一个classMap，里面的class名字分 阅读全文
posted @ 2018-04-08 11:10 Beyrl.pan 阅读(869) 评论(0) 推荐(0)
vue2.0：（七）、vue-resource
摘要：本篇文章开始前，先介绍下什么是vue-resource，并且现在还有一个axios。 Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpReq 阅读全文
posted @ 2018-04-03 10:33 Beyrl.pan 阅读(1065) 评论(0) 推荐(0)
vue2.0：（六）、移动端像素border的实现和整合引入less文件
摘要：知识点一、如何在手机上看我们制作的移动端页面。 正常我们在电脑上都是按如下图来制作手机页面的： 如果要在手机上面看就不能用localhost了。所以，进入命令行，输入ipconfig查看本地ip地址： 然后返回本地页面，把localhost替换成这个地址。然后把整体输入在手机上，就能看到页面在手机上 阅读全文
posted @ 2018-03-27 11:30 Beyrl.pan 阅读(1026) 评论(0) 推荐(0)
vue2.0：（五）、路由vue-router
摘要：好的，接下来，我们来写路由。用的是vue2.0的路由。 步骤一：配置main.js 步骤二：配置App.vue，写入组件 注意：知识点哦，知识点： 1、使用 router-link 组件来导航 2、通过传入‘to’ 属性指定链接(与router/index.js的path属性相一致) 3、route 阅读全文
posted @ 2018-03-27 09:53 Beyrl.pan 阅读(1373) 评论(0) 推荐(0)
vue2.0：（四）、首页入门，组件拆分1
摘要：为什么需要组件拆分呢？这样才能更符合模块化这样一个理念。 首先是index.html,代码如下： app.vue文件： main.js文件 好，先让我们看一下这么写的效果和最后呈现在HTML的结构是什么样的（太简单了，我怕你们打我。。。。） 我脑子笨，你们原谅我连这点都想不明白，我刚开始就在纠结这三 阅读全文
posted @ 2018-03-23 11:09 Beyrl.pan 阅读(3204) 评论(0) 推荐(0)
vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom）
摘要：接下来，就需要对main.js App.vue 等进行操作了。 但是这就出现了一个问题：什么是main.js，他主要干什么用的？App.vue又是干什么用的？main.js 里面的import from又在干嘛？newVue（{}）是干嘛的？里面又需要什么参数，它到底能干什么。在网上搜了一篇博文，解 阅读全文
posted @ 2018-03-22 17:25 Beyrl.pan 阅读(44201) 评论(1) 推荐(9)
vue2.0：（二）、mock数据
摘要：什么是mock数据呢？很多情况下，后台的搭建比起前端来说要麻烦的多，所以，常常是前端写好了页面以后后台接口却没有写好，但是在一个项目中，接口调试确实是最浪费时间的，所以，往往前端需要自己模拟数据。 第一步：这里有一个data.json,用来放置我们模拟的数据： 其格式类似于： 但是最后具体是什么样的 阅读全文
posted @ 2018-03-22 15:12 Beyrl.pan 阅读(3279) 评论(0) 推荐(1)
vue2.0：（一）、vue的安装和项目搭建（以外卖app项目举例）
摘要：vue系列踩坑大作战由此就要开始了，准备好了吗，和我一起踩坑，学会vue吧。同时，也欢迎大家把自己遇到的坑发出来，让更多的人学会vue，因为我深知前端学习新框架不容易，尤其是我这种半路出家的女前端。不废话了，开始吧： 摘要：本篇文章介绍了vue环境配置，项目的搭建等。（如果有人node安装配置环境变 阅读全文
posted @ 2018-03-21 13:50 Beyrl.pan 阅读(3120) 评论(3) 推荐(0)