随笔分类 -  vue 相关

加深对vue的理解，一切和vue有关的都去了解一下！
从$emit 到 父子组件通信 再到 eventBus
摘要：故事还是得从$emit说起，某一天翻文档的时候看到$emit的说明 触发当前实例上的事件？就是自身组件上的事件呗，在父子组件通信中，父组件通过props传递给子组件数据（高阶组件可以用provide和inject），由于这是单向数据流，为了保证复用组件的的时候出现数据错乱。 那么只能通过在子组件里面 阅读全文
posted @ 2018-09-01 14:38 萝卜爱吃青菜 阅读(1684) 评论(0) 推荐(1)
vue中的$on,$emit,$once,$off源码实现
摘要：这几种模式是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。 第一步就是创建一个构造构造，维护一个事件中心events $on $emit $once $off 总结：其实原理非常简单，要注 阅读全文
posted @ 2018-09-01 13:40 萝卜爱吃青菜 阅读(1230) 评论(0) 推荐(1)
v-for的简单实现
摘要：运行结果如下： 总结：真正的vue是会处理得到虚拟dom再去render生成dom的，并且实例中维护的数据都是具有setter,getter属性以及watch监察者的，以此达到响应式，这里只是简单的模拟实现一下。 阅读全文
posted @ 2018-08-24 16:59 萝卜爱吃青菜 阅读(1644) 评论(0) 推荐(0)
v-for的显示过滤/排序结果
摘要：对于v-for列表渲染指令，项目中很常用的额，但是我们一般可能在从后端接口拿到数据的时候就把数据通过循环整理改造成自己想要的样子了。有时候可能对于不同的列表需求，还要在data里多造一份数据。 这种做法是非常累赘的。最好的方式是在v-for循环的时候对数据进行操作，从而可以做到维护源数据不变。 第一 阅读全文
posted @ 2018-08-22 17:39 萝卜爱吃青菜 阅读(5363) 评论(0) 推荐(0)
JS实现Promise原理
摘要：promise是用来解决Js中的异步问题的，js中所有的异步可从callback → promise → generator + co = async + await 其实所有的都是callback的变相处理，只是后者慢慢变的越来越优雅和强壮可扩展。 那么如何实现promise呢？先观察一下prom 阅读全文
posted @ 2018-08-16 20:20 萝卜爱吃青菜 阅读(12594) 评论(5) 推荐(4)
vue登录插件引来的后续问题
摘要：上次介绍了下写的登录弹框插件，过了几天发现点击去注册或者改密码的跳转失效。报错this.$router.push is not a function,继续打印this.$router也是undefined （可以先看一下上一篇博客提到的弹框登录插件） 尝试了很久，试了三种方法。 需要注意的是：登录弹 阅读全文
posted @ 2018-08-14 16:25 萝卜爱吃青菜 阅读(263) 评论(0) 推荐(0)
路由传参，path和query的刷新报错js文件丢失
摘要：日常的路由跳转，基本都会用到传参，有两种方式：path + query, name + params 常用的写法： this.$router.push({ path: 'proDetail',query:{id:query.id,from:this.menuName,fromPath:'proLis 阅读全文
posted @ 2018-08-06 20:49 萝卜爱吃青菜 阅读(339) 评论(0) 推荐(0)
vue项目中的函数封装
摘要：项目中一般都会有fun.js这类的文件，里面有各种的如转换时间格式的，处理转换的等等函数方法。 其实经常用到的去获取基本数据的接口也可以封装成一个方法，方便复用。 如上面所标，获取列表数据之前需要先获取维护的规格选项以及对应的选项值的id集合来进行转换。而且用到这一块的地方还有很多，如商品列表，我的 阅读全文
posted @ 2018-08-06 14:20 萝卜爱吃青菜 阅读(745) 评论(0) 推荐(0)
关于props的注意事项！
摘要：起于昨晚大半夜在群里看到有人问这个问题，在子组件的data属性里重新赋值props属性 this.a = this.propA，不生效！ 提示了他如果是异步的话，就要注意watch.决定今日敲个demo分析一下过程。 官方文中中其实有提到，用计算属性。父组件值传入子组件，一个单向数据流，如果是重新把 阅读全文
posted @ 2018-08-03 12:46 萝卜爱吃青菜 阅读(1374) 评论(0) 推荐(1)
swiper轮播始终居中active图片
摘要：用的是vue-awesome-swiper 在vue项目中,参数方法与swiper一致。使用场景如下： 左侧小图一共八张，默认显示的是三张，始终保持activeimg在中间，提升用户体验度。swiper容易就是为三张图片的高度。 在官方文档实例中，居中如下。 这样的话，第一张图片也是居中的，它的上面 阅读全文
posted @ 2018-08-02 19:47 萝卜爱吃青菜 阅读(7843) 评论(1) 推荐(0)
vue中登录模块的插件封装
摘要：一个电商城的项目，场景是：在未登录的情况下点击收藏或者加入购物车等操作，执行一个方法如this.$login()来动态插入登录组件。 第一步：写好关于这个登录弹窗的单文件组件 loginBox.vue 第二部：编写loginBox.js文件，输出一个函数方法，如下图 关于$mount()需要注意 第 阅读全文
posted @ 2018-08-01 16:52 萝卜爱吃青菜 阅读(558) 评论(0) 推荐(0)
v-show
摘要：v-show的原理是当值为false的时候，元素display:none 隐藏了元素且脱离文档流，但是在dom 中仍然存在。 与v-if使用场景不同，文档中提到，当需要高频切换的时候使用v-show会更加的有益与性能，当然v-if的初始开销是要高于v-show的。 阅读全文
posted @ 2018-07-29 20:26 萝卜爱吃青菜 阅读(286) 评论(0) 推荐(0)
v-if
摘要：vue中通过v-if,v-else-if,v-else的对应的Boolean值来操作元素在dom中是否移除。 这里就以单纯的true,false来模拟一下。注：标签属性去出来的值为string类型。 <html> <head> <meta charset="utf-8" /> <title></ti 阅读全文
posted @ 2018-07-29 20:13 萝卜爱吃青菜 阅读(1511) 评论(0) 推荐(0)
记录因webpack版本问题导致vue-cli快速搭建的项目运行时报错！
摘要：今日突然在群里见到好几个小伙伴说在创建vue项目后不能跑，会报错。 刚开始还不信，花了几分钟时间自己试了下，还真报错了！如下图 小伙伴的报错，如下图！ 百思不得其解，看了运行的日志也找不出原因。于是去github上找答案！ 果然，在最近的提交中，很多人就提到了这个问题。直接就找到了大神给出的解决方法 阅读全文
posted @ 2018-01-09 19:34 萝卜爱吃青菜 阅读(226) 评论(0) 推荐(0)
记录Vue和Jquery混合开发中关于点击事件的一个bug
摘要：最近比较急的接手了公司的微信服务号项目，采用的技术栈主要是jq和vue。在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用，只能写在vue实例中的methods中，然后用@click去监测。 一直困惑的是这个BUG在不同的页面中有时有，有时没有，而且出 阅读全文
posted @ 2018-01-04 16:04 萝卜爱吃青菜 阅读(13178) 评论(1) 推荐(0)
Vue Elementui 如何让输入框每次自动聚焦
摘要：在项目优化中碰到一个小问题，在每次提示框显示的时候让提示框中的输入框聚焦。如下图。一般情况下提示框是隐藏的。点击了编辑才会弹出。 那么原生属性autofocus 只在模板加载完成时起作用，也就是说只有第一次有用。 然后尝试了ref，再this.$refs.el 也不能成功拿到该元素，因为饿了么组件封 阅读全文
posted @ 2017-11-14 12:49 萝卜爱吃青菜 阅读(15071) 评论(5) 推荐(2)
vue中数据双向绑定的实现原理
摘要：vue中最常见的属v-model这个数据双向绑定了，很好奇它是如何实现的呢？尝试着用原生的JS去实现一下。 首先大致学习了解下Object.defineProperty()这个东东吧！ 以上总结了对象的defineProperty四个属性：configurable，enumerable，value， 阅读全文
posted @ 2017-09-14 00:12 萝卜爱吃青菜 阅读(513) 评论(0) 推荐(1)