自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(88)
  • 收藏
  • 关注

原创 无障碍工具条在前端项目中的使用

一、使用的工具https://gitee.com/tywAmblyopia/ToolsUI二、使用VUE中使用    -1.拉取代码    -2.将canyou文件夹放到public目录下    -3.在public文件夹下的index.html文件中</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)...

2023-08-01 14:31:00 453

原创 可视化大屏适配解决方案

前言:可视化大屏开发在前端项目中日益增多,为解决大屏可在尽可能多的设备上都能展示,为此提供以下解决方案,可供参考。不仅如此,其他属性也可以乘上此比例,以下代码仅为示例,具体视项目情况而定。1.在公共样式文件中,将px按比例计算转为vw和vh。基准屏幕分辨率:1920 * 1080。2.将设计图中元素的宽高乘以此比例。

2023-02-01 15:04:15 446

原创 配置Vue中@符,出现路径提示

1.Vs code商店搜索Path Intellisense 插件安装2. 打开设置 - 首选项 - 搜索 Path Intellisense - 打开 settings.json ,添加: "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }3.项目根目录创建jsconfig.json 文件,添加...

2021-11-29 11:28:00 926

原创 Vue组件-广告滚动

1.广告组件<!-- * 滚动广告 *@parmas msg 广告内容 *@parmas height 容器高度--><template> <div class="inner" :style="{height:height}"> <ul :class="{marquee_top:animate}" ...

2021-11-12 11:33:00 382

原创 移动端兼容问题

iPhone不能识别YYYY-MM-DD格式的日期所以在所有使用到日期转换的情况,需要先把日期中的 " - " replace 成 " / "。但与后端通信、页面之间通信时,建议继续保留YYYY-MM-DD的格式,因为" / "在http传参中需要进行转义。页面间传递参数使用get方式页面之间传递参数使用get有两个好处,第一,参数相当于保存在了地址中,当我下钻以后回退时,能保存下来参数;...

2021-09-06 13:45:00 40

原创 附录-快速安装 Vue 3.0 依赖

1.安装路由npm i vue-router@next -D2.安装Vuexnpm i vuex@next -D3.安装sassnpm i -D sass4.vscode 支持 eslintnpm install --save-dev eslint eslint-loader babel-eslint eslint-friendly-formatter eslint...

2021-03-13 14:32:00 249

原创 02_配置 Vue 3.0 路由文件

1.安装vue-router@nextnpm i vue-router@next -D2.使用步骤  -1. 创建 router.jsimport { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';// 定义组件,注意 一定要使用文件全名 包括文件后缀import Login...

2021-03-13 14:22:00 94

原创 01_创建 Vue 3.x 项目(vite)

1.vite  vite 是 Vue 作者开发的一款意图取代webpack的工具  原理:利用 ES6 中 import 会发送请求去加载文件的特点,拦截请求,做一些预编译,减少 webpack 冗余的打包时间2. 安装 create -vite -app  - 1.如果已经安装过旧版,先卸载npm install -g create-vite-app或yarn add creat...

2021-03-13 14:08:00 107

原创 百度地图扩展动画maker

1、扩展css3 .css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(250, 0, 0, 0.9); transform: scale(0); anima...

2020-07-29 12:01:00 337

原创 百度地图MarkerClusterer点过多时卡顿问题

问题原因:由于百度地图不断渲染DOM的原因导致点过多时,会出现地图卡顿问题卡顿代码: /** * 向该聚合添加一个标记。 * @param {Marker} marker 要添加的标记。 * @return 无返回值。 */Cluster.prototype.addMarker = function(marker){ if(t...

2020-07-24 13:03:00 1596 1

原创 VUE中使用driver.js实现先手引导

简介特色功能:突出显示页面上的任何任何项目锁定用户交互创建功能介绍为用户添加聚焦器高度可定制 – 可在任何地方使用,可覆盖界面友好 – 可通过按键控制轻量级 – gzip 压缩后只有约4kb在所有主流浏览器中保持一致的行为免费用于个人和商业用途安装### 使用 npm 或 yarn 安装npm install driver.jsyarn add dr...

2020-03-23 21:19:00 691

原创 BScroll使用

简介better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。安装### 使用 npm 或者 yarnnpm install better-scroll --saveyarn add better...

2020-03-01 23:08:00 1329

原创 VUE使用screenfull实现全屏

简介点击某按钮实现页面全屏 按下Esc键退出全屏 IE9以下无需兼容安装### 使用 npm 或 yarn 安装npm install --save screenfull使用### 1.在需要使用的页面中引入import screenfull from 'screenfull'### 2.定义方法实现全屏 clickFullscreen(...

2020-02-29 23:03:00 585

原创 VUE打印功能

简介vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格安装### 使用 npm 或 yarn 安装npm install vue-print-nb --saveyarn add vue-print-nb使用### 1.导入文件import Print from 'vue-print-nb'### 2.在VUE中注册Vue.use(Pr...

2020-02-28 23:09:00 313

原创 VUE中使用XLSX实现导出excel表格

简介项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据安装## 1.使用 npm 或 yarn 安装依赖(三个依赖)npm install -S file-saver xlsxnpm install -D script-loader使用## 1.在项目的 src 目录下新建文件夹(名字任意),创建如下两个文件*** 文件1:Bl...

2020-02-26 23:04:00 1527

原创 Vue中使用NProgress实现进度条

简介NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条GitHub地址:https://github.com/rstacruz/nprogress在线演示地址:http://ricostacruz.com/nprogress/效果如下:安装## 1.使用 npm 或者 yarn 安装及可① npm install --save nprogr...

2020-02-25 23:01:00 382

原创 逆战:微信小程序开发(二)

一、常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据1.首页轮播图数据的请求以及渲染1.1 轮播图数据的请求 pages/home/home.jsimport { request } from './../../utils/index.js'Page({ /** * 页面的初始数据 */ data: { bannerlist:...

2020-02-24 23:04:00 240

原创 CDN&对象存储

概念CDN是什么:名词解释不清,加快静态资源访问的技术CDN原理:将静态资源缓存到用户所在城市实现步骤1:注册七牛云账号 https://portal.qiniu.com/signup?code=1hgfpqu1al36a步骤2:创建xxx目录&uploads目录,再xxx目录下创建img.js修改下述参数信息步骤3:yarn add express multer...

2020-02-24 23:02:00 855

原创 03-React基础语法(3)

一、Context概念:Context 提供一个无需在每层组件中添加Props,就可以实现组件组件之间通信的方法语法:1创建context对象 const {Provider, Consumer} = React.createContext()2 Provider包这最大的组件 并通过value属性传递数据(注:必须是value属性)3 哪个组件要使用数据,就通过 ...

2020-02-24 20:37:00 73

原创 02-React基础语法(2)

一、条件渲染语法:使用原生 js 的 if 或者 三元表达式 判断例子:判断用户是否登录,提示:已登录、未登录 (User组件)<script type="text/babel"> // 判断用户是否登录,提示:已登录、未登录 (User组件) class Login extends React.Compon...

2020-02-24 20:30:00 77

原创 逆战:微信小程序(一)

简介小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。工具1.下载开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html...

2020-02-22 20:13:00 249

原创 微信登录验证

1、步骤2、实现  准备:打开测试账号页,搜索【授权】设置安全回调域名或ip  步骤1:组装url用来获取code (通过开发者工具访问)https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的APPID&redirect_uri=http://自己的网址/login....

2020-01-11 15:35:00 642

原创 01-React基础语法(1)

一、React 简介  React 是一个很火的 js库 或 框架 (facebook)二、React 和 Vue 对比  1.组件化方面    React:由FaceBook前端官方团队进行维护和更新的(有背景,技术实力比较雄厚);    Vue:起初由作者尤雨溪专门进行维护的,回来2.x 版本后尤雨溪主导的开源团队维护和更新;  2.社区方面...

2019-12-25 17:12:00 46

原创 09-仿双向数据绑定

数据双向绑定① 明确: vue 双向绑定时通过 js Object.defineProperty 来实现的② 特征:每个 属性都有 get 和 set 方法一 、 Object.defineProperty  ① vue 是通过 js 的 Object.defineProperty 来实现数据劫持的,当数据读写时分别触发 get/set 方法  ② 语法Obj...

2019-12-12 20:07:00 51

原创 08-Vuex

Vuex一、简介  ① 是什么:是一个状态管理工具,存放项目组件中的公共数据二、使用语法  ① 语法    -1. 创建 Vuex 实例const store = new Vuex.Store({ state:{ // 用来存放组件公共数据 }, getters:{ // 用来过滤读取数据 方法名(...

2019-12-05 16:05:00 62

原创 07-组件通信、slot插槽

一、组件通信  ① 父 => 子  -- 步骤    1)子组件中通过 props 键接受父组件传值    2)父组件通过 v-bind 向子组件传值  --例子<!DOCTYPE html><html lang="en"> <head> <title>Document</title...

2019-11-28 21:54:00 117

原创 Buffer、核心API、npm

Buffer基本操作Buffer对象是Node处理二进制数据的一个接口。它是Node原生提供的全局对象,可以直接使用,不需要require(‘buffer’)。实例化Buffer.from(array)Buffer.from(string)Buffer.alloc(size)功能方法Buffer.isEncoding() 判断是否支持该编...

2019-11-04 21:36:00 201

原创 JS案例 - 分页

1.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-10-16 19:31:00 64

原创 JS案例 - 城市三级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-T...

2019-10-16 09:28:00 105

原创 JS案例--Tab栏切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

2019-10-15 09:02:00 176

原创 Node初识

初识NodejsNode.js的诞生作者Ryan Dahl 瑞恩·达尔2004 纽约 读数学博士 2006 退学到智利 转向开发 2009.5对外宣布node项目,年底js大会发表演讲 2010 加入Joyent云计算公司 2012 退居幕后Node.js 是一种建立在Google Ch...

2019-10-14 19:56:00 53

原创 06-Vue路由

什么是路由对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,...

2019-07-26 17:01:00 55

原创 05-Vue组件

定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用; -全局...

2019-07-26 14:51:00 56

原创 Git版本管理工具使用

1.Git简介 Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。Git 是Linus Torvalds为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。2.安装Git 官方下载链接:https://git-scm.com/downloads/3.Git使用 ...

2019-07-23 16:11:00 48

原创 React 环境搭建

移动App开发环境配置-安装最新版本的java jdk修改环境变量,新增JAVA_HOME的系统环境变量,值为C:\Program Files (x86)\Java\jdk1.8.0_112,也就是安装JDK的根目录修改系统环境变量Path,在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;新建系统环境变量CLASSPAT...

2019-06-05 16:00:00 53

原创 04-Vue中的动画

Vue中的动画为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;-使用过渡类名1.html<div id="app"> <input type="button" value="动起来" @click="myAnimate"> <!-- 使用 transition 将需要过渡的元素包裹起来 --&g...

2019-06-04 15:04:00 105

原创 03-vue实例生命周期和vue-resource

vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 ...

2019-05-28 23:23:00 72

原创 02-vue过滤器和键盘修饰符

过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;-私有过滤器HTML元素:<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}&lt...

2019-05-28 22:12:00 66

原创 01-vue指令

什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只...

2019-05-28 20:55:00 44

原创 webpack

一、什么是 webpack?webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,基于 node 。二、webpack 安装/* 注意:以下命令均在 Windows CMD 下运行 */1. 运行`npm i webpack -g`全局安装webpack,这样就能在全局使用...

2019-05-18 17:19:00 68

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除