04 2019 档案

摘要:恢复内容开始 一、前言 1、底部tab栏实现 2、顶部title栏实现 二、主要内容 1、底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应的显示高亮,并且切换到对应的页面中 (1)html/css代码 <template> <div> <footer c 阅读全文
posted @ 2019-04-29 20:17 mysunshine_SZZ 阅读(2491) 评论(0) 推荐(0) 编辑
摘要:一、前言 不得不说css真强大,总结了几个常用的css特殊效果 二、主要内容 1、几个特殊效果 2、使用2x 3x图做五星 阅读全文
posted @ 2019-04-28 20:45 mysunshine_SZZ 阅读(658) 评论(0) 推荐(0) 编辑
摘要:参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阅读全文
posted @ 2019-04-25 20:41 mysunshine_SZZ 阅读(119) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、服务端渲染图解 2、简介服务端渲染 3、vue-cli脚手架项目创建,实现客户端渲染和服务端渲染 4、演示demo地址:https://github.com/4561231/ssr-vue 二、主要内容 1、服务端渲染图解参照另一篇:服务端渲染和客户端渲染 2、简介服务端渲染 Vue. 阅读全文
posted @ 2019-04-23 18:06 mysunshine_SZZ 阅读(2248) 评论(0) 推荐(0) 编辑
摘要:https://github.com/lavas-project/vue-skeleton-webpack-plugin 阅读全文
posted @ 2019-04-22 17:09 mysunshine_SZZ 编辑
摘要:恢复内容开始 一、前言 1、简介预渲染 2、案例演示(不配置预渲染) 3、配置预渲染, 二、主要内容 1、简介预渲染 SPA有很多优点,但是对搜索引擎SEO不友好,目前主要有两种方式来解决这个问题: 服务端渲染,预渲染 就像官网所说,如果你只需要改善少数页面(例如 /, /about, /conta 阅读全文
posted @ 2019-04-22 17:03 mysunshine_SZZ 阅读(1844) 评论(0) 推荐(0) 编辑
摘要:1、报错如下: 2、此时你执行npm run dev / npm run build 会报错如下 npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! vue@1.0.0 dev: `webpack-dev-server --inline --progre 阅读全文
posted @ 2019-04-21 14:03 mysunshine_SZZ 阅读(11257) 评论(0) 推荐(0) 编辑
摘要:1、原理图如下所示 2、说明 1、安装插件的时候监听hashchange事件,监视_route 2、处理router-link 获取到path关联组件 3、等待hashchange触发,匹配routes中的数据,最终得到matched赋值给_route 4、触发了_route的监听行为,router 阅读全文
posted @ 2019-04-21 10:58 mysunshine_SZZ 阅读(612) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、滚动事件 2、h5 history模式 二、主要内容 1、 (1)使用前度路由,当切换到新路由时,想要页面滚动到顶部,或者是保持原先滚动的位置,就像重新加载页面那样。vue-router的滚动行为,它让你可以自定义路由切换的时候页面如何滚动 但是:这个功能history.pushSta 阅读全文
posted @ 2019-04-21 10:15 mysunshine_SZZ 阅读(814) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、用vuex实现加入购物车操作 2、购物车详情页面 3、点击删除按钮,删除购物详情页面里的对应商品 二、主要内容 1、用vuex加入购物车 (1)在src目录下创建store.js, (2)在main.js入口文件中挂载,并且导入 (3)在app.vue(底部导航组件)中用compute 阅读全文
posted @ 2019-04-17 18:41 mysunshine_SZZ 阅读(513) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、计算总金额 2、点击删除按钮,删除对应的商品信息 3、当还没结算的时候,当用户跳到其他页面时,提示用户是否要离开 二、主要内容 1、计算总金额 (1)效果演示: (2)监听多个属性用到computed计算属性 2、点击删除按钮,删除对应的商品信息 删除操作可以用splice, dele 阅读全文
posted @ 2019-04-15 20:47 mysunshine_SZZ 阅读(851) 评论(0) 推荐(0) 编辑
摘要:一、前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1、解决刷新,购物车上数值不变 2、在购物车点击加减按钮,数值做出对应变化 二、主要内容 1、实现效果:点击购物车的时候可以查看到购物车的商品信息 2、解决刷新,购物车上数值不变 (1)新建一个Cart.vue展 阅读全文
posted @ 2019-04-15 20:19 mysunshine_SZZ 阅读(1751) 评论(0) 推荐(0) 编辑
摘要:一、前言 1.购物车 二、主要内容 1、效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2、具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球显示出来(这里需要用到vue中的动画过渡) 结构如下(这是在加入购物车这个页面) 样式() (3)点 阅读全文
posted @ 2019-04-14 17:26 mysunshine_SZZ 阅读(573) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、公共轮播图的实现 2、组件传参,公共组件的实现 二、主要内容 1、公共轮播图的实现 (1)分析:当渲染不同的轮播图页面的时候,①轮播图的图片数据不一样,②轮播图的高度可能不一样(可以通过之前父子组件传参) (2)在Common文件夹下创建公共组件MySwiper (3)在main.js 阅读全文
posted @ 2019-04-14 10:53 mysunshine_SZZ 阅读(392) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 1、使用mint-ui实现上拉加载 2、出现的坑(当按住鼠标左键然后拖动,会进入一个检测机制) 二、主要内容 1、使用mint-ui实现上拉加载 (1)请求的数据格式 地址 /api/getgoods?pageindex=number 作用描述 获取商品列表展示页面中的所有数 阅读全文
posted @ 2019-04-13 19:52 mysunshine_SZZ 阅读(518) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、渲染评论列表 2、点击加载按钮,加载更多 3、提交评论 二、主要内容 1、评论列表一般是注册到一个全局的公共组件中 2、请求后台数据,渲染评论列表 (1)数据格式如下 地址 /api/getcomments/:artid?pageindex=1 作用描述 根据资讯id获取它的评论的分页 阅读全文
posted @ 2019-04-13 14:25 mysunshine_SZZ 阅读(679) 评论(0) 推荐(1) 编辑
摘要:一、前言 1、让图片还没有被完全加载出来的时候给用户提示 2、图片查看器 二、主要内容 1、让图片还没有被完全加载出来的时候给用户提示 (1)演示如下图所示 (2)只需要在请求数据的时候,判断当前的数据的长度是否为0,为零就调用mint-ui中的toast 2、图片查看器 演示效果: (1)需要下载 阅读全文
posted @ 2019-04-13 11:28 mysunshine_SZZ 阅读(1172) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、导航滑动实现 2、渲染列表信息时让一开始加载的时候就请求数据 3、根据路由的改变,加载图文的改变(实现用户访问网站时可能执行的三个操作) 二、主要内容 1、导航滑动实现: (1)演示效果: (2)代码实现 2、渲染列表信息时让一开始加载的时候就请求数据 (1)在methods里面封装一 阅读全文
posted @ 2019-04-11 19:49 mysunshine_SZZ 阅读(1547) 评论(0) 推荐(0) 编辑
摘要:一、前言 this.$router.go(-1)返回上级路由 https://www.cnblogs.com/hwldyz/p/9204346.html 二、主要内容 1、小功能演示: 2、组件之间的嵌套关系为: 3、具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数据不一样 阅读全文
posted @ 2019-04-10 15:35 mysunshine_SZZ 阅读(526) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 1、底部导航(两种做法) 2、轮播图 3、九宫格 二、主要内容 1、底部导航 方式一:借用mint-ui, 这里实现tab切换时高亮可以给每个tab双向绑定一个值 (1)html结构代码如下 (2)实现点击时切换,并且当前的背景为高亮 mint-ui官方说了tabBar有va 阅读全文
posted @ 2019-04-09 21:50 mysunshine_SZZ 阅读(2496) 评论(1) 推荐(0) 编辑
摘要:一、前言 今天在做项目的时候发现axios不能请求跨域接口 二、主要内容 1、之前直接用get方式请求聚合数据里的接口报错如下 2、当前请求的代码 3、解决方法 (1)在项目目录中依次找到:config-->index.js (2)配置如下: (3)重新运行项目,发现就可以拿到数据了 三、总结 阅读全文
posted @ 2019-04-09 19:49 mysunshine_SZZ 阅读(6110) 评论(0) 推荐(0) 编辑
摘要:一、前言 主要通过一个例子演示三个钩子的作用: 1、beforeRouteEnter() 2、beforeRouteUpdate() 3、beforeRouteLeave 二、主要内容 1、举例说明:下面有三个组件,用户1,用户2公用一个公共组件。 2、beforeRouteEnter() (1)详 阅读全文
posted @ 2019-04-08 19:42 mysunshine_SZZ 阅读(2824) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 1、webpack异步加载原理’ 2、webpack.ensure原理 3、例子 二、主要内容 1、webpack异步加载原理’ webpack ensure有人称他为异步加载,也有人称为代码切割,他其实就是将js模块给独立导出一个.js文件,然后使用这个模块的时候,webp 阅读全文
posted @ 2019-04-08 09:32 mysunshine_SZZ 阅读(1484) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 1、多入口文件配置 2、CommonsChunkPlugin的用法 3、在上面例子的基础上,抽离出vue模块 4、接下来需要单独抽离webpack运行文件 5、抽取公共模块 二、主要内容 1、多入口文件配置 很多时候我们不仅仅只有一个入口文件,当有多个入口文件的时候,我们也需 阅读全文
posted @ 2019-04-07 16:39 mysunshine_SZZ 阅读(1628) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 1、webpack-dev-server 2、es6的解析 3、单文件引入 二、主要内容 1、webpack-dev-server (1)常用的配置参数 --open :自动打开浏览器 --hot: 热更新, 不在刷新的情况下替换Css样式 --inline: 自动刷新 -- 阅读全文
posted @ 2019-04-04 20:38 mysunshine_SZZ 阅读(242) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、webpack.config文件配置 2、webpack打包css文件 3、webpack配置打包img文件 4、编译less文件 5、webpack将index.html 和build.js编译到同一个文件夹 二、主要内容 1、webpack.config文件配置 webpack 在 阅读全文
posted @ 2019-04-02 22:07 mysunshine_SZZ 阅读(211) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、webpack原理 二、主要内容 1、webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,webpack是一个打包工具,可以将我们多个静态资源文件,多个js打包成一个js, 多个css打包成一个c 阅读全文
posted @ 2019-04-02 09:52 mysunshine_SZZ 阅读(1091) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示