随笔分类 -  vuejs

Vue双向数据绑定简易实现
摘要：一、vue中的双向数据绑定主要使用到了Object.defineProperty（新版的使用Proxy实现的）对Model层的数据进行getter和setter进行劫持，修改Model层数据的时候，在setter中可以知道对那个属性进行修改了，然后修改View的数据。 二、简易版双向数据绑定 以上简 阅读全文
posted @ 2019-02-22 11:41 DHeng 阅读(295) 评论(0) 推荐(0)
vue的依赖注入provide和inject
摘要：一、解决的场景问题： 根父组件A有一个方法getMap，该组件A下的所有子组件B，子组件C，子组件D，或者子组件B下的子组件E等层层嵌套情况下，在某种情况下，都需要访问父组件的getMap方法，那么常用的方法是子组件B：this.$parent.getMap()，组件E则是：this.$parent 阅读全文
posted @ 2019-01-28 17:06 DHeng 阅读(3632) 评论(0) 推荐(1)
vue中的$listeners属性作用
摘要：一、当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。 注意：使用.native修饰符的事件，不会体现在$listeners属性上。 阅读全文
posted @ 2019-01-28 16:25 DHeng 阅读(17423) 评论(0) 推荐(2)
vue中的$attrs属性和inheritAttrs属性
摘要：一、vue中，默认情况下，调用组件时，传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（有一些属性除外），而这些“非法”的属性会记录在$attrs属性上。 二、如何控制不把这些非法的属性渲染在组件的根元素上呢？答案是在组件内部设置inheritAttrs:false即可 阅读全文
posted @ 2019-01-28 15:46 DHeng 阅读(3113) 评论(1) 推荐(1)
vue中使用axios下载文件，兼容IE11
摘要：一、设置axios返回值为blob 二、使用a标签的down属性下载，如果是IE浏览器，可以使用navigator.msSaveBlob进行下载 阅读全文
posted @ 2018-12-12 17:31 DHeng 阅读(1223) 评论(0) 推荐(0)
Vue的作用域插槽
摘要：一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过slot向父组件传递数据，类似React中的“以函数为子组件”，由父组件决定渲染的内容（包含绑定事件，样式，HTML标签等）；我把数据给你父组件了，你爱怎么处理就怎么处理，极大的提高了灵活性。 阅读全文
posted @ 2018-11-22 15:36 DHeng 阅读(204) 评论(0) 推荐(0)
后端根据查询条件生成excel文件返回给前端，vue进行下载
摘要：一、HTML代码 二、JS代码 三、axios的设置 阅读全文
posted @ 2018-10-30 10:16 DHeng 阅读(6185) 评论(0) 推荐(0)
Vue.js 使用 $refs 定位 DOM 出现 undefined
摘要：找到这篇文章，写得不错，记录一下。https://www.jianshu.com/p/090937a480b5 阅读全文
posted @ 2018-10-29 13:42 DHeng 阅读(1270) 评论(0) 推荐(0)
基于vue-cli项目打包慢的定位优化过程
摘要：入职一周后，上一个前端就离职了（超级坑爹的），留下了一个比较棘手的问题，就是基于vue-cli的项目打包超级慢，我接手项目的时候，打包需要45min（上个离职者也不知道原因），经过3个月之后，随着项目的不断迭代，打包的时间飙升到了2个半小时。为了解决这个问题，以前没有做过这方面的优化，在结合网上的一 阅读全文
posted @ 2018-10-18 11:12 DHeng 阅读(19713) 评论(2) 推荐(2)
vue-cli按需引入Element UI组件
摘要：一、环境 使用vue-cli搭建的环境 二、安装 babel-plugin-component npm install babel-plugin-component -D 三、修改.babelrc文件，可以直接拷贝一下的配置，红色部分是在原来基础上添加的。 四、在main.js文件添加所需的组件即可 阅读全文
posted @ 2018-10-15 15:31 DHeng 阅读(5376) 评论(0) 推荐(0)
vue中的样式穿透
摘要：参考一下的文章即可： https://www.cnblogs.com/karthuslorin/p/9038854.html http://www.php.cn/js-tutorial-399072.html 阅读全文
posted @ 2018-08-17 15:01 DHeng 阅读(743) 评论(0) 推荐(0)
element UI实现动态生成多级表头
摘要：一、效果图 二、封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue TableColumn.vue 三、使用 HTML代码 JS代码 阅读全文
posted @ 2018-08-16 20:01 DHeng 阅读(24558) 评论(3) 推荐(5)
vue点击编辑按钮，内容变成input可以修改，也可以删除
摘要：一、效果 图1 图2，点击报错之后，又变成图1的效果 二、使用到了element UI中的以下组件： <el-button> <el-input> 三、使用的关键点是vue中的v-if指令 四、关键代码如下 HTML部分 JS部分 阅读全文
posted @ 2018-08-16 19:37 DHeng 阅读(30108) 评论(1) 推荐(2)
NProgress颜色的修改以及在Vue中的使用
摘要：一、NProgress的作用是在站内进行页面之间的跳转的时候，在浏览器的顶部显示一个进度，使用非常简单，可以在百度一下。 二、如何修改NProgress默认的进度条颜色？如下图，修改为自己想要的颜色即可 三、如何vue-router中使用NProgress？ 在vue-router中，可以使用全局的 阅读全文
posted @ 2018-08-02 19:53 DHeng 阅读(4033) 评论(0) 推荐(0)
vue中使用raphael.js实现地图绘制
摘要：一、效果图 二、在vue中引入raphael.js npm i raphael -S 三、封装一个名为StreetMap的组件，代码如下 四、参考网站 1、https://www.cnblogs.com/stephenykk/p/3553690.html raphael矢量图API 2、https: 阅读全文
posted @ 2018-08-02 19:32 DHeng 阅读(1689) 评论(2) 推荐(0)
在vue中让某个组件重新渲染的笨方法
摘要：在vue中，推崇的是数据驱动也就是数据更新进而使组件得以重新渲染；在某些情况下，我们想要在数据不改变的情况下，重新渲染组件；我遇到的一个情况是：同一个页面，两个tab页分别为tab1和tab2，公用了一个组件，在tab1页修改了数据，再去tab2页查看的时候，发现tab1修改的数据会在tab2中的组 阅读全文
posted @ 2018-07-23 23:58 DHeng 阅读(12875) 评论(0) 推荐(0)
IE11报错:[vuex] vuex requires a Promise polyfill in this browser的问题解决
摘要：昨天其他同事反馈IE浏览器无法打开线上的应用，查看了一下，发现控制台报以下错误： 发现和vuex有关系，去其官网查看了一下文档，发现关于IE浏览器的Promise的问题： 在vue-cli（webpack4）中的解决方案如下： （1）安装babel-polyfill 命令：npm i babel-p 阅读全文
posted @ 2018-07-13 10:46 DHeng 阅读(1097) 评论(0) 推荐(1)