- 博客(225)
- 资源 (21)
- 收藏
- 关注
RSS订阅原创 谷歌翻译退出中国，官方因其使用率过低
Google 宣布在中国区停止提供翻译服务，现在访问 translate.google.cn 网页会指向translate.google.com.hk，此做法与此前谷歌搜索、谷歌地图等功能退出中国大陆时一致。
2022-10-05 17:18:21
1820
原创 域名更换通知
青梅煮码，原博客网站（共享博客），域名：dxel.cn一路和博主走过了三四个年头，今天正式的退役（卖出），博主于2021年8月1号，已经启用新的域名：qmblog.cn,感谢大家一如既往的支持！...
2021-08-12 22:12:15
2494
原创 2021年web前端面试集锦
一. HTML、CSS相关HTML5新特性、语义化语义化标签 ： header nav main article section aside footer语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。语义化的优点有:代码结构清晰，易于阅读，利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。有利于搜索引擎优化（SEO），搜索引擎爬虫会根
2021-08-01 10:49:57
702
1
原创 Linux镜像源 国内镜像列表
一. 站点版（一）、企业站1.搜狐：http://mirrors.sohu.com/2.网易：http://mirrors.163.com/3.阿里云：http://mirrors.aliyun.com/4.腾讯：http://android-mirror.bugly.qq.com:8080/（仅针对APP开发的软件，限流，不推荐）（二）、教育站1.上海交通大学：http://ftp.sjtu.edu.cn/html/resources.xml（部分移动运营商出口状况不佳，无法访问）2.
2021-03-26 17:22:41
3215
原创 小程序里面的双向绑定和vue中的双向绑定有什么区别？
小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 . 在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值 . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 . 通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定vue中的数据双向绑定 . 首先为文本框绑定...
2021-03-20 11:13:25
3595
原创 vuex最简单、最详细的入门文档
我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件--><template> <div> <a href="javascript:;" @click="show = true">点击</a&..
2021-03-20 11:07:19
249
原创 vuex的mutation和action的区别和使用
mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：this.$store.commit(“mutation函数名”，发送到mutation中的数据)Actionactions函数接受一个与 store 实例具有相
2021-03-20 11:05:38
2116
原创 vue组件中的data为什么是一个函数
一、总结1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，
2021-03-20 11:04:14
10967
原创 Vue 组件间通信六种方式
前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$list.
2021-03-20 10:58:59
213
3
原创 delete和Vue.delete的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变,length长度不会改变。Vue.delete 直接删除了数组 改变了数组的键值。 length长度改变了代码片段:<script> var a=[1,2,3,4] var obj=[1,2,3,4] delete a[1] console.log(a) vue.delete(obj,1) cons...
2021-03-20 10:57:23
2208
原创 vue是如何获取元素节点 ？
Js中：用document.getElement之类的语句来操作dom;vue：使用vue提供的api，用 ref 来获取节点；首先先用ref在元素上面做一个标记，然后用this.$refs.标记名来获取元素代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>document</title> <script src="https
2021-03-20 10:55:58
6210
1
原创 Vue项目优化首页加载速度
一、路由懒加载{ path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 }这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件二、使用CDN引入<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
2021-03-20 10:53:31
384
原创 vue中 不更新视图的处理办法？
方案一：利用Vue.set(object,key,val)例：Vue.set(vm.obj,'key','value')方案二：利用this.$set(this.obj,key,val)例：this.$set(this.obj,'key','value')方案三：利用Object.assign({}，this.obj)创建新对象Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...so
2021-03-20 10:49:57
177
原创 vue实现路由懒加载几种方式
一、为什么需要路由懒加载vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。使用路由懒加载可以分割代码，提高初始页的加载效率。**二、路由懒加载的方式1、使用ES6的import ( ) --推荐使用**const 组件名 = ( ) => import(‘组件路径’)（下
2021-03-20 10:46:15
1110
原创 共享博客
共享博客个人开发的共享博客专注前端领域，感兴趣的小伙伴快来踩一踩啦！共享博客，顾名思义，即所有用户的博客产出共享在一个平台上，每个用户都拥有独立的账户和个人空间，每个用户可以自行管理个人在本平台的一切的信息。同时，用户们可以就谋篇博文或某个兴趣领域进行探讨、交流；促进个人技能领域的提升，亦或是挖掘兴趣领域，结交益友等。青梅煮码-共享博客，目前基本功能完善，安全稳定运行，免注册学习交流，更多新功能体验还需后期发布，敬请期待，感谢您的谅解。访问网址： 一点博客-青梅煮码-共享博客...
2020-08-14 13:36:20
565
原创 touch.js – 移动设备上的手势识别与事件库
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。Touch.js手势库专为移动设备设计。Touch.js对于网页设计师来说，是一款不错的辅助工具，可以减少很多写框架控制器的时间。网页合理使用Touch.js不但能增加网页的美观感，而且在节约时间，减少人力投入也有极大的帮助。Touch.js官网： ...
2020-06-29 20:43:20
464
原创 vue 中基于html5 drag drap的拖放
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一：开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！move (e) { let odiv = e.target // 获取目标元...
2020-06-29 18:21:39
287
原创 移动端实现拖拽的两种方法
移动端的项目经常会引入手势库来实现拖拽不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算最近的项目中就有这么一个需求：因为就这一个地方需要拖拽，所以我就没有引入第三方库移动端的拖拽有两种主流的实现方案：1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果；2. 使用 transform 中的平移tra...
2020-06-29 12:12:01
1585
原创 支持web端和移动端的拖拽排序插件 dragula
Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。代码演示：<script src="dist/dragula.js"></script><link rel="stylesheet" href="dist/drag...
2020-06-29 03:16:30
552
1
原创 20款CSS按钮鼠标HOVER效果展示
20款csshover按钮样式特效，看看能否给你带来灵感，喜欢的可以自己尝试使用，或者直接修改他的代码，创作一个新的cssHOVER样式出来。扩展阅读《33个jQuery与CSS3实现的绚丽鼠标悬停效果》NanukAntimanNukaNinaWapashaSaqUI...
2020-06-25 21:11:26
1178
2
原创 vue2.0生命周期详解
生命周期图示生命周期详解周期名称内容beforeCreate（创建前）在数据观测和初始化事件还未开始created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性未见beforeMount（载入前）在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此...
2020-06-24 20:51:16
172
1
原创 自定义封装axios
前言今天研究了一下公司pc端封装的axios，主要配合element以及js-cookie，自己跟着搞了一遍，在这里记录一下。代码import axios from 'axios';import { Loading } from 'element-ui';import Cookies from 'js-cokie';//基于axi...
2020-06-24 20:11:53
125
原创 vue-router嵌套子路由实际使用
前端路由的定义在spa流行之前，前端路由是没有的；而像java之类的后台语言很早就有了，后端路由一般就是定义一系列的访问地址规则，路由引擎根据这些规则匹配并找到对应的处理页面，然后将请求转发给页面进行处理。在spa应用中，前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法，一是在地址中加入#以欺骗浏览器，地址...
2020-06-24 17:45:56
739
原创 vue中$refs、$emit、$on的使用场景
1、$emit的使用场景子组件调用父组件的方法并传递数据注意：子组件标签中的时间也不区分大小写要用“-”隔开子组件：<template> <button @click="emitEvent">点击我</button></template><script> export def...
2020-06-24 14:19:52
254
原创 vue路由嵌套，配置children嵌套路由
嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套 1 //mine组件 2 <template> 3 <div class="content"> 4 在mine的组件里面嵌套路由 5 ...
2020-06-24 13:29:13
690
原创 vue项目基础配置
一、项目初始化创建1.本地初始化bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目2.建立和码云的连接在码云上创建一个没有readme的空项目我后来在github重新创建并引用了码云的项目,主要维护github,然后使用码云的强制更新关联GitHub的地址.3.建立...
2020-06-24 12:36:54
424
原创 webpack介绍、配置、使用
webpack介绍和使用一、webpack介绍1、由来由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。2、介绍webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片...
2020-06-24 11:44:14
148
原创 vuejs-指令详解
文章目录v-ifv-showv-elsev-modelv-repeat数组变动检测内置过滤器1.filterBy(0.12版本)2.orderBy(0.12版本)v-forv-textv-htmlv-bindv-onv-refv-elv-prev-cloakv-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式...
2020-06-24 11:30:48
162
原创 "router-link"各种属性解释
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，...
2020-06-24 08:42:43
186
原创 meta标签强制客户端浏览器为google内核+兼容+双核
meta代码：// 强制客户端浏览器为google内核<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 设置谷歌内核<meta name="renderer" content="webkit"> 360浏览器的head头部有一行代码作为参考：...
2020-06-24 03:55:13
649
原创 Meta 标签使用详解
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：<head><meta http-equiv="content-Type" content="text/html; charset=gb2312"></head> 也许你认为这些代码可有可无。其实如果你能够用好...
2020-06-24 03:50:43
364
原创 快速删除node_modules文件夹
问题：windows下无法删除node_modules文件夹，提示文件名或扩展名太长无法删除，即使能够删除，速度也是不敢恭维。特此百度一番，找到了一个很好的方法解决这个问题，特此记录。解决方法：使用npm的一个名为rimraf的模块进行删除官方描述：The UNIX commandrm -rffor node，即node环境下模拟unix或者linu...
2020-06-24 03:36:01
1259
原创 Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网...
2020-06-24 03:20:40
234
原创 “router-link”各种属性解释
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元...
2020-06-24 00:38:12
378
原创 HTML网页/KRPano项目一键打包EXE工具
工具简介HTML一键打包EXE工具(HTML封装EXE,桌件)能把任意HTML项目(网址)一键打包为单个EXE文件，可以脱离浏览器和服务器，直接双击即可运行。支持KRPano全景VR项目,WebGL游戏项目(Egret游戏打包,Cocos游戏打包,RPG MV Maker游戏打包),课件打包,网址打包等.打包工具群：429338543最新软件下载...
2020-06-23 23:50:35
2601
原创 Vue style里面使用@import引入外部css, 作用域是全局的解决方案
问题描述使用@import引入外部css，作用域却是全局的<template> </template> <script> export default { name: "user" };</script> <!-- Add "scoped" attribu...
2020-06-23 06:56:09
1954
原生JS经典案例特效
2018-10-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人