前端开发
文章平均质量分 72
加深理解和学习
ylnzzl
这个作者很懒,什么都没留下…
展开
-
Vue2 迁移到 Vue3
Vue2 迁移到 Vue3原创 2024-02-26 10:27:44 · 2118 阅读 · 0 评论 -
Vue2 模版编译及生命周期钩子 总结归纳
Vue2 模版编译及生命周期钩子 总结归纳原创 2023-12-03 16:00:48 · 224 阅读 · 0 评论 -
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题原创 2023-10-28 10:05:30 · 4791 阅读 · 0 评论 -
Vue切换回页面可见状态后,避免执行多次滚动定位的动画
vue里的一个页面组件涉及到音频文件的自动播放,并且在自动播放时要自动滚动聚焦定位到对应的语音文本列表项,那么当用户点击了自动播放后,点击浏览器的其它标签页页面 或者 打开了电脑的其它软件完全遮盖住了 该页面,那么过了一段时间,再重新查看浏览器的该页面时,该页面里累积的自动滚动聚焦定位动画会连续执行,一直到积攒的未执行的自动滚动聚焦定位动画全部执行完后才会停止,而页面看起来就是连续快速定位多次,会严重影响到用户体验。原创 2023-10-19 18:43:55 · 451 阅读 · 0 评论 -
Vue 插槽的理解与基础应用
Vue 插槽的理解与基础应用原创 2022-10-30 15:24:03 · 580 阅读 · 0 评论 -
通过 代码实例 理解 浅复制 与 深复制
通过 代码实例 理解 浅复制 与 深复制原创 2022-06-13 15:14:34 · 187 阅读 · 0 评论 -
animation、transition、transform、filter各一个示例
目录公共代码demo.htmlcss/common.cssanimation反复左右旋转、大小变化、透明度变化的方块transition旋转变大、透明变色的方块消失后出现文本transform扭曲效果filter逐渐清晰的文本公共代码demo.html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <原创 2022-04-29 22:44:19 · 268 阅读 · 0 评论 -
div布局、table布局、flex布局、多列布局、网格布局 示例
目录基础代码demo.htmlcss/common.cssdiv实用布局示例代码效果图table布局代码效果图flex布局代码效果图多列布局代码效果图网格布局代码效果图基础代码demo.html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv.原创 2022-04-20 15:29:05 · 3334 阅读 · 0 评论 -
开发页面模板
目录基本模板目录结构电脑端页面电脑端框架页面手机端页面适配屏幕页面基本模板目录结构webRoot│ 1.txt│ index.html│ 说明.txt│ ├─pc│ │-main.html│ │ │ ├─css│ ├─fonts│ ├─imgs│ ├─js│ ├─modules│ └─pages│ ├─es6│ └─jquery├─screen│ │-i...原创 2021-10-31 21:30:25 · 178 阅读 · 0 评论 -
一览代码学习Vue(二)
目录代码运行效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>综合代码学习Vue【二】</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>原创 2021-09-20 19:43:49 · 102 阅读 · 0 评论 -
一览代码学习Vue(一)
目录代码运行效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>综合代码学习Vue【一】</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>原创 2021-09-20 15:46:33 · 144 阅读 · 0 评论 -
Vue相关概念介绍
目录Vue全家桶Vue-cliVueRouterVuexAxios搭配UI框架iviewelementUIvant软件工具babelwebpackNode.jsnpmVue全家桶Vue-clivue-cli也叫脚手架,官方定义为Vue.js开发的标准工具。VueRouterVue.js官方的路由管理器,让构建单页面应用变得很简单。VuexVuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式原创 2021-09-19 14:26:58 · 131 阅读 · 0 评论 -
安装Vue-cli项目
目录步骤说明检查安装版本卸载构建项目运行项目目录文件步骤说明检查检查软件是否安装:node -vnpm -vvue -Vwebpack -vcnpm -v没有出现版本号表示未安装。注意vue -V里的V要大写。安装可通过下载node.js安装包来安装node.js和npm。全局安装webpack方法:npm install webpack -g全局安装vue-cli脚手架搭建工具:npm.原创 2021-09-19 14:25:26 · 144 阅读 · 0 评论 -
代码编辑器功能插件
目录Sublime Text 3docblocker 快速生成注释安装过程配置过程使用方法CodeFormatter 格式化代码安装过程配置过程使用方法Sublime Text 3可通过点击Sublime Text3顶部的preferences【偏好】->Broswe Packages...【浏览安装包...】来查看安装的插件包所在的文件夹。想让弹窗消失可通过按ctrl+p快捷键来实现。想看到插件安装过程信息,可以点击右下角小图标,在弹出选项中点击“原创 2021-08-29 15:05:42 · 525 阅读 · 0 评论 -
正则表达式
普通字符[ABC] 匹配[]内的所有字符:A、B、C。[^ABC] 匹配[]内所含字符之外的所有字符。[A-Z] 匹配从A到Z的26个大写英文字母。[\s\S] 匹配所有字符。. 匹配除换行符制表符之外的任何字符。相当于[^\n\r]。\w 匹配字母、下划线和数字。相当于[A-Za-z_0-9]。定位符不可以将定位符和限定符一起使用。$ 匹配输入字符串的结尾位置。^ 不在方括号...原创 2021-08-26 17:11:52 · 167 阅读 · 0 评论 -
React环境搭建及基础开发
目录简介React引入JSX运行JSXReact 工具链Create React AppNext.jsGatsby其它概念Hello World实例JSX的使用元素渲染组件 & PropsState & 生命周期事件处理条件渲染列表 & Key表单状态提升组合 vs 继承简介ReactReact是一个用于构建用户界面的javaScript库,适用于用 JavaScript 构建快速响应的大原创 2021-08-12 22:13:50 · 919 阅读 · 0 评论 -
Sass 3 的环境搭建及开发
简介Sass是一个CSS预处理器,可以帮助减少重复CSS代码的书写,提高开发前端页面的效率。Sass兼容很多版本的CSS,并且拓展了CSS,增加了规则、变量、混入、继承、内置函数等特性。Sass生成的CSS文件代码格式良好,易于维护。有些框架使用了Sass,如Compass,Bootstrap V4。Sass 3.0版本之前的后缀名是.sass,Sass 3版本的后缀名则是.scss。最主要的区别就是.sass里是靠缩进表示嵌套关系,而.scss里是靠大括号{}表示嵌套关系。重命名.原创 2021-08-11 09:31:56 · 666 阅读 · 0 评论 -
通过Sass 3 编写媒体查询代码
Sass媒体查询示例代码编译前$phone_max_size:769px;//手机$flat_max_size:993px;//平板$medium_max_size:1201px;//中等屏幕$small_font_size:12px;$medium_font_size:14px;$big_font_fize:16px;$small_line_height:14px;$medium_line_height:18px;$big_line_height:22px;...原创 2021-08-11 09:05:58 · 591 阅读 · 0 评论 -
Vue2.x API 学习
目录Vue 2.x API全局配置silentoptionMergeStrategiesdevtoolserrorHandlerwarnHandlerignoredElementskeyCodesperformanceproductionTip属性$data$props$el$options$parent$root$children$slots$scopedSlots$refs$isServer$attrs$原创 2021-08-09 23:53:26 · 191 阅读 · 0 评论 -
Vue2.x 学习
目录Vue2.0 介绍简介实例属性组件指令生命周期浏览器版本要求安装调试script 标签引入NPM安装命令行工具 (CLI)对不同构建版本的解释Vue2.0 介绍简介Vue 是一套用于构建用户界面的渐进式框架。MVVM【Model-ViewModel-View】框架模式可以理解为一个网站全栈开发的基本模式MVC【Model-Controller-View】里的Model和Controller被粗划分为MVVM里的Model【因为MVV原创 2021-08-09 22:36:18 · 138 阅读 · 0 评论 -
Shim、Polyfill
基础知识简介ShimShim【垫片】可理解为是指仅依靠旧的环境里已有的方法实现模拟出一个新的API,方便不同的浏览器表现出相同的效果。Shim的一种通常做法是针对旧版本浏览器对新特性支持的不足,做一些兼容性的库,例如JQuery里的$.ajax封装了window.XMLHttpRequest和IE里的ActiveXObject来创建xhr对象。Shim的一个特点是拦截浏览器里的一些旧的API调用,并提供自己的API实现。Shim是实践优雅降级开发理念的一种方法。Pollyfi原创 2021-08-09 13:32:15 · 345 阅读 · 0 评论 -
ECMAScript6(ES6)知识积累
目录ECMAScript6(ES6)let命令多行字符串 `...`展开语法 ...Object.assign模板字符串 ${name}Map 和 SetiterablepromiseECMAScript6(ES6)注意:浏览器不一定支持最新的ES6标准。let命令var声明的变量只能是全局或者整个函数块的,而let声明的变量作用域被限制在块级中。在处理构造函数时,可通过let声明【而不是闭包】来创建一个或多个私有成员。示例代码:functi原创 2021-08-09 11:27:02 · 109 阅读 · 0 评论 -
JQuery Easyui
目录简介属性事件方法文件引入Base(基础组件)parser(解析器)easyloader(简单加载)尾语简介easyui的每个组件都有属性、方法和事件,能在plugins文件夹里看到很多组件js文件里定义的属性、方法和事件,可以去重写它们或者扩展它们为己所用。有以下两种方式可引入组件:给标签名加上 class="easyui-组件名" data-options="属性列表字符串"。 对指定元素进行javascript【如通过JQuery方法】设置组件及原创 2021-08-06 22:14:28 · 231 阅读 · 0 评论 -
Bootstrap V3 (摘要)
目录简介全局css样式开发规范栅栏系统参数容器类行内等高列列偏移嵌套列列排序媒体查询排版列表表格tabletr实例表单规范内联表单水平排列表单支持的控件控件状态控件尺寸添加额外的图标帮助文本实例按钮按钮元素尺寸注意图片响应式图片图片形状辅助类文本颜色背景色关闭按钮三角符号快速浮动让内容块居中清除浮动显示或隐藏内容屏幕阅读器和键盘导航原创 2021-08-05 23:01:32 · 880 阅读 · 0 评论 -
jQuery知识点(摘要)
简介jQuery 是一个轻量级 JavaScript 库,可简化JavaScript 编程。CDN可以通过 CDN(内容分发网络) 引用jQuery文件。谷歌和微软的服务器都存有 jQuery文件 ,但谷歌服务器的jQuery文件访问可能会受阻,所以可优先用微软服务器的jQuery文件。Microsoft jQuery文件引入示例:<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js...原创 2021-08-04 23:50:33 · 141 阅读 · 0 评论 -
Ajax实现
简介AJAX全称是Asynchronous JavaScript and XML,含义是异步的 JavaScript 和 XML。AJAX 是一种在无需重新加载整个网页的情况下,通过向服务器发出请求,接收并处理服务器响应数据的技术,可实现如更新后台数据库数据、网页局部信息更新等效果。AJAX的实现依赖于浏览器内建的XMLHttpRequest对象(IE5、IE6则是ActiveXObject对象)。JS实现创建对象在创建对象时,先检查浏览器是否支持XMLHttpRequest对象原创 2021-08-04 00:05:44 · 159 阅读 · 0 评论 -
JSON和JSONP
JSON简介JSON是一种轻量级数据交换格式,基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。JSON可理解为是一种严格的js对象的格式,JSON的属性名必须用双引号括起来,如果值是字符串,也必须用双引号括起来。转换将js对象转换为JSON字符串,可以通过JSON.stringify()方法;将JSON字符串转换为js对象,可以通过JSON.parse()方法(或者eval(‘(‘+str+’)’))。原创 2021-08-03 19:39:24 · 173 阅读 · 0 评论 -
JavaScript知识点(摘要)
JavaScript简介JavaScript(简称“js”) 是一种具有函数优先特征的轻量级,解释型或即时编译型的编程语言。js 支持面向对象、命令式、声明式、函数式编程范式。js的标准是ECMAScript 。js 使用 Unicode 字符集。完整的js实现包含三个部分:(1).ECMAScript: 描述了该语言的语法和基本对象。(2).文档对象模型(DOM): 描述处理网页内容的方法和接口。(3).浏览器对象模型...原创 2021-08-03 19:36:11 · 468 阅读 · 0 评论 -
CSS3新特性(摘要)
CSS3 简介css用于控制网页的样式和布局,css3是css2的升级版本,css3语言开发是朝着模块化发展的。在编写css3样式时,不同的浏览器可能需要添加不同的前缀,这是因为有些css3属性尚未成为W3C标准时,一些浏览器就已经对一些css3属性进行了私有化属性实现。为了更好地向前兼容,一些必要的浏览器前缀还是可以加上的。 前缀 浏览器 -webkit- Chrome,Safari -moz-原创 2021-08-02 23:15:09 · 251 阅读 · 0 评论 -
CSS选择器(摘要)
在CSS中,选择器是选择需设置样式的元素的模式。CSS1选择器 选择器 含意 .class 选择所有样式名列表中有{class}样式名的元素 #id 选择id名称为{id}的元素 element 选择所有元素名称为{element}的元素 e1,e2 选择所有元素名称为{e1}或者{e2}的元素原创 2021-08-01 20:04:00 · 71 阅读 · 0 评论