- 博客(120)
- 收藏
- 关注
RSS订阅原创 Vue学习笔记（十八）——Vue数据双向绑定原理解析
参考文档：https://www.cnblogs.com/zhenfei-jiang/p/7542900.htmlVue的数据双向绑定的基础是通过Object.defineProperty()劫持作用域中变量的get和set方法实现的，示例如下：示例中数据双向绑定的实现：js对象变更触发dom变更：当执行virtualData.data = “default”;时输入框的信息同步更新为def...
2019-07-08 16:11:25
660
原创 获取svg内text文本元素的高度、宽度及坐标等信息
之前有一篇文章介绍了如何获取svg元素的高度、宽度等信息，传送门：https://blog.csdn.net/lqlqlq007/article/details/81875996但是svg内的text文本元素通常不会给定宽度和高度，而动态计算文本元素位置时这些信息是必须的（比如希望text文本元素上下左右居中），此时可以通过getBoundingClientRect方法来获取，示例代码如下：&...
2019-06-28 18:21:12
10015
原创 Vue学习笔记（十七）——$nextTick()的使用场景
尽管Vue不建议开发者去操作真实dom，但在实际开发中仍然会有部分操作真实dom的场景。初学者在操作真实dom的时候一定会遇到下面这样的问题：页面使用了Vue的某个变量，希望在变量更新后立即操作变量映射的dom，但是发现查询到的dom信息是更新之前的。解决方案：这个问题是由于更新Vue的变量后不会立即更新变量映射的dom，但是Vue提供了$nextTick()方法，我们可以把希望在真实dom更...
2019-06-24 11:04:08
2316
转载 reflow（重排/回流）、repaint（重绘）及其优化
原文地址：https://blog.csdn.net/u013100656/article/details/79888106浏览器拿到HTML之后的渲染过程：生成dom树；生成render树；执行reflow（在render树的基础上计算页面真实显示dom的位置）；执行repaint（为真实显示的dom绘制不影响dom位置的样式，如设置dom的color等）。reflow：当页面...
2019-06-21 17:38:51
829
原创 Vue学习笔记（十六）——组件的懒加载
参考文档一：https://cn.vuejs.org/v2/guide/参考文档二：https://www.cnblogs.com/zhanyishu/p/6587571.html懒加载实质是让页面非必须资源延迟加载，减少页面加载用时，从而达到页面性能优化的目的。注意：本文涉及的懒加载配置都是基于webpack4.6.0，如果示例代码有错误，请先检查webpack版本。在vue工程中，懒加...
2019-06-17 22:36:44
6285
原创 Vue学习笔记（十五）——搭建基于webpack的vue开发环境
参考文档：https://segmentfault.com/a/1190000012789253?utm_source=tag-newest依次执行文档贴出的命令即可完成基于webpack的vue开发环境的搭建，如果无法成功搭建（如某一步骤发生错误）请在文档下留言以便笔者更正。环境准备（首先搭建webpack环境，故vue会在后面的步骤安装）1.初始化工程：npm init2.安装we...
2019-06-14 18:44:58
605
原创 Vue学习笔记（十四）——keep-alive标签用法
参考文档：https://cn.vuejs.org/v2/guide/本文主要介绍keep-alive标签的用法。keep-alive标签用于切换组件时保留隐藏组件的状态。例如当组件a显示时，变更了组件a的data，然后把组件a切换为组件b，再切回组件a：如果组件被keep-alive包裹，则组件a的data为变更后的状态；如果组件未被keep-alive包裹，则组件a的data为初始化状态。...
2019-04-26 22:58:49
4516
1
原创 Vue学习笔记（十三）——slot插槽（PART4）
参考文档：https://cn.vuejs.org/v2/guide/本文主要介绍插槽的缩写和复用。插槽的缩写：v-slot:可以缩写为#（类似v-on:可以缩写为@，v-bind:可以缩写为:），例：v-slot:default="slotProps"可以缩写为#default=“slotProps”，但不能写为#=“slotProps”（即缩写时缺省插槽名不能省略）。以下为示例代码：...
2019-04-25 14:22:31
539
原创 Vue学习笔记（十二）——slot插槽（PART3）
参考文档：https://cn.vuejs.org/v2/guide/非组件插槽的几个注意点：1.当有多个参数需要传递给插槽时，可以用v-slot:插槽名="slotProps"的方式以参数集合对象的方式来传递（如果插槽是唯一的，则插槽名可以写为default或者直接省略）；2.如果插槽是唯一的，可以省略template元素，把v-slot定义在父元素上；3.如果插槽是不唯一的，则不能省略...
2019-04-23 13:40:51
264
原创 Vue学习笔记（十一）——slot插槽（PART2）
如果声明了2个插槽 但是实际使用中有3个template 那么额外的template会如何处理（考虑会被丢弃？）可以像给组件传递参数那样给插槽传递数据（即使这个插槽不是组件也可以，但未传递的话则不能直接使用）当只有一个默认插槽时，可以用以下缩写来传递数据//在组件test中可以使用传入的参数item1<test :item1="data1" v-slot:item2="data2"&...
2019-04-22 12:53:20
260
原创 Vue学习笔记（十）——slot插槽（PART1）
参考文档：https://cn.vuejs.org/v2/guide/首先简单说明一下slot插槽的应用场景：父元素可以通过solt插槽来控制子组件内嵌入的html模版或孙子组件（在之前给出的例子中，通常都是由子组件自己来控制嵌入的孙子组件，如https://blog.csdn.net/lqlqlq007/article/details/88971556内组件嵌套的例子）。在使用插槽时有以下几...
2019-04-08 21:35:07
1383
原创 Vue学习笔记（九）——sync修饰符
参考文档：https://cn.vuejs.org/v2/guide/sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑，可以参考如下示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sync修饰符<...
2019-04-05 09:30:54
1434
原创 Vue学习笔记（八）——router绑定事件不生效的解决方案
参考文档一：https://cn.vuejs.org/v2/guide/参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码：<!DOCTYPE html><html lang="en"&...
2019-04-02 20:25:54
3150
原创 Vue学习笔记（七）——解析v-model（PART2）
参考文档一：https://cn.vuejs.org/v2/guide/参考文档二：https://segmentfault.com/a/1190000010744545?utm_source=tag-newest上一篇博客介绍了v-model的基础应用场景和注意点，本文将重点说明几个特殊的应用场景。当需要重构组件（新增v-model），但组件已经包含了value变量时（或者待应用的元素的v...
2019-04-01 09:37:54
278
原创 Vue学习笔记（六）——解析v-model（PART1）
参考文档一：https://cn.vuejs.org/v2/guide/参考文档二：https://segmentfault.com/a/1190000010744545?utm_source=tag-newest在官网上关于v-model的用法是这么说的：一个组件上的v-model默认会利用名为value的prop和名为input的事件。实际上v-model相当于传递了一个名称为value...
2019-03-30 08:16:43
497
原创 promise终止方案
方案帖子地址：https://bbs.csdn.net/topics/392558819简单描述一下需求场景：页面同时并发多个相同的请求（即发送请求的代码是复用的），请求的响应时间不定（即后发请求的可能比先发的请求响应更快），需要做到每次只处理最后一次请求的响应结果。下面上代码：class promiseContainer { constructor() { this.promi...
2019-03-26 18:40:11
8196
原创 Vue学习笔记（四）——v-for的key
参考文档：https://cn.vuejs.org/v2/guide/当使用v-for遍历数组时，如果没有指定key，则当数组元素顺序发生变更时，dom绑定的数据会更新，而dom本身的顺序不会变化；如果指定了key，则当数组元素顺序发生变更时，dom会和数据同步更新。下面用一个简单的例子来说明：<!DOCTYPE html><html lang="en"><h...
2019-03-18 23:34:16
5131
原创 Vue学习笔记（三）——比较计算属性和方法
计算属性和方法唯一的区别在于计算属性有缓存而方法没有，也就是说，只要计算属性的依赖属性没有发生变化，计算属性就不会重新计算，而方法则每次调用都会重新计算。如果计算属性没有在任何地方被使用，即使计算属性的依赖属性发生变化，计算属性也不会重新计算，直到计算属性被使用时才会触发重新计算；但如果计算属性有被使用（可以是在页面上显示也可以是在方法中被使用），则计算属性的依赖属性发生变化后，计算属性会立刻重新计算。
2019-02-28 17:39:48
977
原创 Vue学习笔记（二）——比较计算属性和侦听属性
如果导致计算属性发生变化的变量是某个对象的属性，计算属性不会监听整个对象（但侦听属性会，故有浅监听和深度监听的配置），而只会监听对象中会导致计算属性发生变化的属性。所以，当可以用计算属性替代侦听属性，尽量使用计算属性，计算属性监听的精准性和缓存机制会大大提升代码的性能。
2019-02-25 14:14:26
450
原创 Vue学习笔记（一）——Vue与angularJS比较分析
参考文档：https://cn.vuejs.org/v2/guide/虚拟dom映射到真实dom的机制不同angularJS通过脏检查来实现，当作用域内变量发生变化时会触发脏检查，脏检查会遍历当前虚拟dom树下所有的变量检查是否变化，如果变化则更新对应的真实dom，这个检查动作会执行多次，直到没有变量改变为止。要注意的是，这个遍历动作不会区分变量是否改变，即所有的变量在每次遍历过程中都会检查，...
2019-02-21 15:49:33
1295
原创 angular中directive的资源竞争
directive的资源竞争问题发生在父元素同时包含多个directive的场景下，下面直接上代码（angular版本为1.4.6）：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&
2019-01-05 17:58:34
566
原创 webpack4.x——htmlWebpackPlugin的minify各配置项用法说明
htmlWebpackPlugin中内置了html-minifier，这个插件多用于页面资源压缩，但是常用的配置说明不太容易理解（而且多数配置默认是不起效的），故本文将对常用的配置进行补充说明。参考文档：https://github.com/kangax/html-minifier#options-quick-reference中文API请点这里：传送门removeComments（默认值f...
2018-11-15 17:26:25
11065
3
原创 webpack4.x为图片资源配置base64编码规范
webpack可以通过url-loader（file-loader）来完成对符合要求图片资源进行base64编码转换的功能。参考文档：http://www.cnblogs.com/coco1s/p/4375774.html下面直接上webpack.config（即通过url-loader的limit配置项来完成，单位byte，大于limit的图片资源会进行base64编码转换）：const ...
2018-11-14 18:23:10
5027
原创 webpack4.x中关于css-loader的几个坑
本文主要记录笔者在webpack4.x项目下使用css-loader管理css踩到的坑（下面用一个逐步修改的示例来说明）。项目的初始诉求是使用webpack来托管css的合并。当前项目代码结构如下图：package.json代码：{ &amp;amp;quot;name&amp;amp;quot;: &amp;amp;quot;webpack4-css-loader&amp;amp;quot;, &amp;am
2018-11-13 18:02:38
11793
原创 webpack4.x抽取css【extract-text-webpack-plugin与mini-css-extract-plugin】
本文主要记录笔者在使用webpack抽取css时遇到的一些问题。参考文档：https://www.npmjs.com/package/extract-text-webpack-pluginhttps://www.npmjs.com/package/mini-css-extract-plugin项目的初始诉求是利用webpack来管理css（合并），并增加hash（性能优化），当前项目使用w...
2018-11-08 18:30:30
19736
5
原创 app应用选型——原生还是web
首先简单介绍一下什么是原生app和webapp：原生app是基于平台开发的一个应用程序，webapp则是一个web应用（和pc端的web应用没有本质区别，唯一的区别是一个在pc端的浏览器中访问，一个在移动端的浏览器中访问）。再举一个例子：原生app类似于安装在电脑上的微信应用程序，webapp则类似于电脑上在浏览器中运行的网页版微信。不过实际情况是目前已经很少有纯的原生app或weba...
2018-08-30 18:42:39
7563
2
原创 获取svg元素的高度和宽度（或其他属性）
下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但两种定义方式获取属性的方法有所不同）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2018-08-20 18:53:24
16960
转载 javascript渐变色算法
算法支持在指定起始颜色、结束颜色和渐变色区域数量的情况下算出渐变色列表。下面直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></hea
2018-08-09 18:42:10
3909
原创 mac下访问github配置
最近gayhub被微软收购以后时不时会被墙掉： 代码pull或者push不成功，感觉糟透了。还好，mac也可以像windows那样在hosts文件里手动配置gayhub域名对应的ip，只是hosts文件的路径和windows有所不同：mac下hosts文件的路径是/private/etc/hosts然后把下面这段ip-域名映射信息复制进去：151.101.185.194 gi...
2018-07-26 10:17:53
4983
3
原创 mac下查找文件完整路径
查找文件完整路径分两种情况：不知道文件的位置，只知道文件的名称，想查看文件在哪个路径下；知道文件的位置和名称，想查看文件的完整路径。第一种情况可以用find命令查找，举例如下（在/Users/liqing/路径下查找名称为气泡图.png的文件，但我们不知道这个文件具体在哪个目录下）：具体find命令怎么玩的请自行百度。第二种情况在mac的UI里右键文件属性是看不到的（这点...
2018-07-25 11:55:01
64328
原创 angularjs下textarea内容被自动裁剪的问题
本文源自笔者在开发过程中遇到的一个小问题，特此记录。问题很简单：在angularjs环境下，textarea中的内容起始的空格和换行会被自动裁剪。下面上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="
2018-07-16 18:41:43
788
原创 git多用户切换
如果是用https方式clone代码，那么可以通过修改git配置中的用户和邮箱来切换用户：git config --global user.name "YOURUSERNAME" git config --global user.email "YOUREMAIL"不过切换后要记得清除本地缓存（如windows里缓存的凭据，不清楚的同学请点传送门），否则git会一直尝试用本地缓存来访问...
2018-06-07 18:45:03
44472
1
原创 webpack如何兼容开发模式和生产模式
在前端工程中引入webpack后，开发人员往往会有下面两个疑问：webpack的编译实际上是对代码执行合并、压缩和混淆等动作，最终生成的代码往往已经不具备可读性，不利于开发对问题进行debug；每次代码修改都需要webpack执行一次编译动作，上面提到的合并、压缩和混淆等动作过于消耗性能。首先看一下可读性问题，以笔者上一篇博客的代码为例，我们在mainCtrl.js里故意构造一个脏检...
2018-06-06 18:13:47
3907
原创 webpack4.6.0打包包含oclazyload组件（懒加载）的angular1.x工程
当前能百度到的webpack打包包含oclazyload组件的angular1.x工程的文章大多用的是webpack1.x版本，但实际上webpack.config里很多1.x版本的配置项在最新的4.6.0里已经废弃了（或名称、位置发生了调整），这意味着我们直接拿用webpack1.x版本可以成功打包的源码工程过来用最新版本的webpack打包是会报错的，出错信息可以看这里了解一下：webpack...
2018-05-11 14:11:21
1977
原创 webpack打包时提示Invalid configuration object错误
初学者如果是通过网上教程来学习webpack，第一次用webpack打包时通常会遇到下面这样的问题： 实际上出错信息已经说明了问题原因：Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.这一...
2018-04-26 12:16:13
90685
3
转载 前端静态资源缓存最优解以及max-age的陷阱
原文地址：点这里合理的使用缓存可以极大地提高网站资源的利用率，还可以节约带宽从而降低服务器成本。但是很多站点针对缓存的策略并不合理，甚至是完全无作为，如果是这样，就完全没有发挥出缓存的优势，而不合理的策略反而很大程度上会导致网站在访问时会发生由于静态资源的竞争关系而导致依赖的静态资源不同步的问题（简单地说，就是页面发生了崩坏）。以下为两个最佳静态资源缓存实践的例子：资源内容长时间内...
2018-04-15 09:20:38
23459
原创 web storm license server（持续更新）
2018.4.8亲测可用：http://im.js.cn:8888上面的license server在2018.4.11已失效，请使用下面的activation code（2018.4.12更新）：2JA97R55MG-eyJsaWNlbnNlSWQiOiIySkE5N1I1NU1HIiwibGljZW5zZWVOYW1lIjoiWGlhbmdRaWFuIExpIiwiYXNzaWdu...
2018-04-08 11:15:03
3873
原创 web worker的用法及应用场景
首先简单介绍一下什么是web worker。我们都知道在浏览器中javascript的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，这非常影响用户体验，所以ajax应运而生了。ajax的出现使得页面在等待服务器响应的这段时间内不再发生阻塞，但是这仍然没有改变代码单线程执行的本质，这也意味着我们依旧不能把耗费时间的复杂运算放在页面上执行。而web worker的出现弥补了这...
2018-04-07 11:52:00
24528
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人