随笔分类 -  Vue

摘要:一、前言 今天在做以前的项目的时候,发现了一个bug。 通过vuex请求到的数据,并且在控制台中能打印出请求的数据,但是渲染的时候报如下 二、解决方法 检查代码时发现这里少加了一个{} 阅读全文
posted @ 2019-07-25 18:19 mysunshine_SZZ 阅读(1715) 评论(0) 推荐(0) 编辑
摘要:1、解析一般指令(以v-text为例) 其他普通指令(v-text, v-model, v-html, v-class)和上面的原理类似 2、解析事件指令(以v-on:click为例) 3、总结 事件指令解析步骤: 1) 从指令名中取出事件名2) 根据指令的值(表达式)从methods 中得到对应的 阅读全文
posted @ 2019-05-23 20:37 mysunshine_SZZ 阅读(1290) 评论(1) 推荐(0) 编辑
摘要:1、双向绑定: 1) 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的2) 双向数据绑定的实现流程:a. 在解析v-model 指令时, 给当前元素添加input 监听b. 当input 的value 发生改变时, 将最新的值赋值给当前表达式所对应的data 属性 2、具体实 阅读全文
posted @ 2019-05-23 20:01 mysunshine_SZZ 阅读(174) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、数据绑定原理 2、在数据绑定中四个重要的对象 3、具体实现 3.1初始化阶段 3.2建立Dep和watcher的联系阶段 3.3更新阶段 二、主要内容 1、数据绑定原理 (1)概念:一旦更新了某个数据,该节点上所有直接使用或者间接使用的节点都会更新 (2)导致页面更新的操作: 方式一: 阅读全文
posted @ 2019-05-23 17:57 mysunshine_SZZ 阅读(1210) 评论(0) 推荐(0) 编辑
摘要:1、数据代理:一个对象(A)来代理对另一个对象(B)的属性操作(A一定要包含B) 2、vue中的数据代理:用vm实例对象来代替data 对data中的数据进行操作 (1)vm实例代替data对象操作data对象中的name (2)分析:在控制台中打印输出vm实例如下 vm实例对象中有_data对象里 阅读全文
posted @ 2019-05-19 18:04 mysunshine_SZZ 阅读(1824) 评论(1) 推荐(3) 编辑
摘要:一、前言 1、[].slice.call(lis)将伪数组转化为真数组 2、node.nodeType: 得到节点类型 3、Object.defineProperty(obj, propName, {}): 给对象添加修改属性 4、Object.keys(obj) 5、DocumentFragmen 阅读全文
posted @ 2019-05-19 15:49 mysunshine_SZZ 阅读(190) 评论(0) 推荐(0) 编辑
摘要:1、项目报错如下: 2、先访问别的路由,在访问这个页面的路由这样不报错,但是我直接在这个页面上刷新就报错 3、分析解决: 1)找到我的length出现的地方,说出错说明现在info里面是空的 2)先进入其他路由 在进入当前路由 此时我的info已经拿到了,vuex里面存的不是空对象了, 这种方式不会 阅读全文
posted @ 2019-05-16 22:08 mysunshine_SZZ 阅读(29083) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、缓存路由组件对象 2、路由组件懒加载 3、图片懒加载 4、打包文件分析与优化 二、主要内容 1、缓存路由组件对象 (1)实现代码 (2)优点:复用路由组件对象,复用路由组件获取的后台数据 (3)举例:下面是路由组件,当我切换路由的时候每次都需要重新请求数据,当我来回的不断切换的时候,这 阅读全文
posted @ 2019-05-16 21:02 mysunshine_SZZ 阅读(467) 评论(0) 推荐(0) 编辑
摘要:一、前言 二、主要内容 1、效果分析 2、分析 1)根据上面的两部分的条件需要得到计算之后的新数组 2)评论的数据参数如下 满意的时候rateType=0: 不满意的时候rateType=1 (3)条件1:当选择 “全部” 的时候,不需要考虑“满意”,“不满意”这两个 (4)条件2:考虑此时是“勾选 阅读全文
posted @ 2019-05-15 18:02 mysunshine_SZZ 阅读(2160) 评论(0) 推荐(0) 编辑
摘要:一、前言 二、主要内容 1、实现效果(其实可以直接在父组件中操作子组件的显示隐藏,但是这里通过在子组件定义自己的显示隐藏效果,让父组件调用,训练一下这种方式) 2、分析: (1)点击父组件的某一个li项,跳出这个商品详情(子组件项) (2)子组件中还是需要接收到父组件中的food,但是这个food不 阅读全文
posted @ 2019-05-13 21:43 mysunshine_SZZ 阅读(5004) 评论(0) 推荐(0) 编辑
摘要:一、前言 二、主要内容 1、效果 2、分析: 1)点击按钮进行加减操作,肯定要注册一个点击事件,可以给这个点击事件传入一个标识,让他区别什么时候加,什么时候减 2)现在是将加减这一部分单独提取出来的一个公共主键,所以还需要区分每一个主键 3)父组件中在遍历的时候,(food, index) in g 阅读全文
posted @ 2019-05-13 18:46 mysunshine_SZZ 阅读(3153) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、效果演示 2、实现分析 3、具体实现 4、完整代码 二、主要内容 1、效果演示 (1)文字说明:滑动右侧左侧对应的类别显示高亮,点击左侧的类别名称右侧滑动到对应的位置 (2)图示 2、实现分析 (1)分析:滑动右侧的时候左侧对应的类高亮,高亮显示是通过current类来控制的,当右边滑 阅读全文
posted @ 2019-05-12 16:42 mysunshine_SZZ 阅读(6365) 评论(0) 推荐(1) 编辑
摘要:1、项目报错如下 2、原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3、解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5、总结:表达式有一层表达 阅读全文
posted @ 2019-05-11 20:33 mysunshine_SZZ 阅读(51084) 评论(2) 推荐(1) 编辑
摘要:一、前言 二、主要内容 1、当用户登录之后才会出现“退出登录按钮” 2、登录之后 3、这里使用mint-ui, “退出登录”按钮的显示隐藏和是否有userInfo的值是一样的,如果存在userInfo就显示这个退出按钮,如果没有登录就不显示 4、点击退出按钮的时候调用,logout方法,给用户一个提 阅读全文
posted @ 2019-05-11 15:45 mysunshine_SZZ 阅读(645) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、密码登录(分析) 2、验证码部分 3、提交表单 4、保存显示 5、完善功能,首页中如果登录成功之后显示的是图标,没有登录显示的是“注册登录” 6、处理bug(当我们一刷新之后当前登录的信息都没有了) 二、主要内容 1、密码登录(分析) (1)第一步用户输入先提交登录表单信息 2、验证码 阅读全文
posted @ 2019-05-11 15:20 mysunshine_SZZ 阅读(2212) 评论(0) 推荐(0) 编辑
摘要:一、前言 1、动态获取图片验证码 2、实现手机验证码登录(工具准备) 3、手机验证码登录(后台实现) 3、前台实现 二、主要内容 1、动态获取图片验证码 (1)请求的接口如下,返回的是一张svg的图片 (2)初次显示图片,可以直接在image中的src中请求路径直接得到 (3)点击图片的时候更新,m 阅读全文
posted @ 2019-05-09 21:59 mysunshine_SZZ 阅读(7225) 评论(2) 推荐(0) 编辑
摘要:一、前言 1、切换手机登录还是密码登录 2、显示发送验证码 3、点击发送验证码显示“已发送()” 4、密码框的内容显示隐藏效果 5、提交表单进行前台验证,出现不正确给出提示 二、主要内容 1、切换手机登录还是密码登录 (1)手机选择切换的时候先看看有哪些变化,是什么导致了变化(当前的都多加了一个类) 阅读全文
posted @ 2019-05-06 21:26 mysunshine_SZZ 阅读(4621) 评论(0) 推荐(0) 编辑
摘要:一、前言 我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果 二、主要内容 1、将五星写在一个复用组件里面(因为在很多地方都会用到) <template> <div class="star" :class="'star-'+size"> <span 阅读全文
posted @ 2019-05-06 09:26 mysunshine_SZZ 阅读(2053) 评论(0) 推荐(0) 编辑
摘要:恢复内容开始 一、前言 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) 编辑
摘要:一、前言 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) 编辑

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