qq_29207823的博客

使用正则表达式识别字符串中的链接，并可跳转到此链接方法一：方法二：

在工作中，遇到一个循环调用的场景，需要用到父组件调用子组件，然后在子组件中，再循环调用父组件。代码类似这样的：menu-item.vue<template> <div class="meun-item"> <sub-menu v-if="menu.subMenu && menu.subMenu.length" :menu="menu" /> <router-link v-else :to="m

我们可以做一个单独的组件，通过监听鼠标的down，move以及up事件来实现拖动边框，改变元素宽度功能。下面我们写一个组件Xhandle.vue。<template> <div class="x-handle" @mousedown="mouseDown"></div></template> <script>export default { name: "XHandle", data() { return {

首先sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端：sockjs-node（https://github.com/sockjs/sockjs-node）客户端：sockjs-clien（https://github.com/sockjs/sockjs-client）如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一...

记录一下地址，有空学习一下：http://www.hewebgl.com/article/getarticle/27

vue源码理解参考地址：https://vue-js.com/learn-vue/reactive/object.html#_2-%E4%BD%BFobject%E6%95%B0%E6%8D%AE%E5%8F%98%E5%BE%97-%E5%8F%AF%E8%A7%82%E6%B5%8B

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attributes

WebP（发音：weppy）是由谷歌于2010年推出的新一代图片格式，它同时提供了有损压缩与无损压缩（可逆压缩）；webP图片优势：它具有更优的图像数据压缩算法，能带来更小的图片体积； 拥有肉眼识别无差异的图像质量； 具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果：更多测试查看WebP 示例 (PNG 转.

参考：https://segmentfault.com/a/1190000015846104

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步）一、适合初学者使用，保存数据以及获取数据1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，

created()：在创建vue对象时，当html渲染之前触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据、keepalive缓存组件后，可执行方法；deactivated()：离开组件时执行；注意：activated()和deactivated()只有在<keep-alive></ke

模块一：全局导航钩子函数1、vue router.beforeEach（全局前置守卫）beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。它的三个参数：to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）from: (Route

箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。而且它是固定的。function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);} var id = 21; foo.call({ id: 42 });// id: 42上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是

以前开发的时候遇到一个坑，就是对象的拷贝赋值问题，现在把它记录一下。大致是这样子的：var obj1 = { a: 1}var obj2 = obj1;obj2.a = 2;console.log(obj2.a); // 2console.log(obj1.a); // 2发现当我改变obj2.a值的时候，obj1.a值也相应的改变了。为什么会这样子呢？这就需要我们理解javascript的引用类型。引用类型的值引用类型值是引用类型的实例，它是保存在堆内存中

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。为什么要清除浮动呢？清除浮动的本质是什么？清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。优点：通俗易懂，书写方便..

当浏览器的窗口大小被改变时触发的事件window.onresizewindow.onresize = function(){ alert();} 

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;中国地图&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="ma

常见的正则表达式一、校验数字的表达式1 数字：^[0-9]*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(\-)...

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;date range picker&lt;/title&gt; &lt;link rel="stylesheet" href="bootstrap.min.css"&gt; &lt;link rel="stylesheet

1.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}retur...

我们可以使用数组的filter属性，过滤掉指定的对象；var newarr = [ { num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', flag: 'aa2' }]newarr = newarr .filter(({ num }) => num !== 1);//newarr = newarr .f...

js写的鼠标拖拽事件，当鼠标滑到iframe区域时，会卡住。我理解的应该是因为iframe框中为加载别的页面，鼠标在iframe框时，相当于处在别的页面中，所以拖拽失效。1.测试代码：<div id="draggable"> <iframe src="http://www.baidu.com"></iframe></div>2...

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的...

noscript 标签中的元素中的内容只有在下列情况下才会显示出来：浏览器不支持脚本浏览器支持脚本，但脚本被禁用符合上述任何一个条件，浏览器都会显示 noscript 中的内容。而在除此之外的其他情况下，浏览器不会呈现 noscript 中的内容。<noscript>Your browser does not support JavaScript!</noscript...

最近接了一个需求，由于左侧导航栏树形菜单等级比较多或标题比较长，导致显示不完全，需要把导航栏改为可拖动改变显示区域大小。在网上找了一个比较简单易理解的做法，记下来供大家参考。<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset...

刚写了一个左右拖动改变内容宽度的例子，自己又改了一下，做了一个上下拖动改变高度的例子，后面需要的话，可以直接拿来用，哈哈哈。<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title&g...

做前端web开发的，经常会需要用到一些框架，看到一个技术大牛整理的一些web UI框架很不错，收藏着留以后备用。目录1.Hplus2.AceAdmin（中/英文）3.inspinia_admin （中/英文）4.H-ui.admin5.AdminLTE一，前言我想大部分人都用过EasyUI吧，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的...

pace.js是一种自动检测页面请求的插件，可以在页面记录加载的状态和进度。【下载附件】https://raw.github.com/HubSpot/pace/v1.0.0/pace.min.js此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，...

一、判断以某个字符串开头或结尾可以用正则表达式，可用作邮箱验证：var a = 'asssffeessaa@uaf.com.hk'; /^a.*@uaf.com.hk$/.test(a) //返回true;以某个字符串开始 是用正则的 ^ 以某个字符串结束 是用正则的 $ 中间的所以字符 可以用 .* （. 表示任意字符，* 表示0次到多次匹配）二、包含某个字...

我们经常会遇到图标+文字的显示方式，但经常设置之后会出现图标不居中的情况：解决办法就是给img标签加vertical-align:middle。&lt;style&gt; img{ width: 25px; vertical-align: middle; /*解决img的字体不居中的问题*/ }&lt;/style&gt;&lt;...

JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。下面简单介绍一下它们的区别1 escape()函数定义和用法 escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。语法 ...

使用:first-child发现选择不起效，网上查了发现自己对:first-child和:first-of-type区别的认识不到。:first-child   匹配父元素的第一个子元素E。&lt;ul&gt; &lt;li&gt;列表项一&lt;/li&gt; &lt;li&gt;列表项二&lt;/li&gt; &lt;li&gt;列表项三&lt;/li&gt; &lt

Cookies定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/&lt;script type="text/javascript" src="js/jq...

1、本地存储（localstorage和sessionstorage）存储形式：key--&gt;value过期策略：localstorage永久存储，不过期，除非手动删除，sessionstorage在重启浏览器、关闭页面或新开页面时失效大小限制：每个域名5M使用方法：（localstorage与sessionstorage操作相同）getItem（读取）、setItem（设...

用一个div当做了一个按钮来使用。&lt;div class="button"&gt; &lt;div class=" next_button button_left btn_red" style="width: 345px;"&gt; 下一步 &lt;/div&gt;&lt;/div&gt;因为是动态添加的内容，所以想要使用click事件，需要给他

公司需要做一个手机横向滑动的效果，不想用js插件，太麻烦，导入代码也多。所以去网上找了一下，用css就能实现，挺方便的。主要利用了display:-webkit-box来实现。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;横向滑动&lt;/title&gt; &lt;style type="text/...

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，还可以创建镂空的字体！h1 { color: transparent; -webkit-text-stroke: 4px red; }  ...

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号，即使设置成 ...

$(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 ...

有时候在网页中编辑文章的时候，编辑窗口中有滚动条，当编辑窗口中的滚动条滚动到底的时候再滚动，就会滚动浏览器的滚动条，怎么在打开编辑的时候禁用浏览器滚动条，编辑完成之后又恢复呢？这里有四个属性可以设置：document.body.parentNode.style.overflow = "hidden";//隐藏且禁用横向纵向两个滚动条document.body.parentNode.sty...