- 博客(74)
- 收藏
- 关注
RSS订阅原创 element ui el-select默认值闭坑
当默认值是value：【选项的值，】时，要想渲染的数据是label：【选项的标签，】,需注意，默认值的数据类型必须与option遍历数据的value数据类型一致
2022-06-07 15:58:49
478
原创 swiper子项可滚动
swiper-slide里嵌套滚动容器 【注】:需要滚动的slide的样式要添加 overflow-y:scroll;否则不生效 `this.swiper.slides.on('touchstart', function (e) { startScroll = this.scrollTop; touchStart = e.targetTouches[0].pageY; }, true); th.
2022-05-21 09:56:14
2015
原创 JS 实现点击复制
引入clipboard.js文件 <span class="orderIdTxt" id="orderId" >要复制的内容 类名与复制按钮的data-clipboard-target要相同</span> <button data-clipboard-action='copy' data-clipboard-target=".orderIdTxt">复制</button> <script> var clipBoard = new Clipboar
2022-04-26 17:50:25
752
原创 使用日期（时间）选择器时格式化数据
format = ‘HH:mm:ss’ 是格式化前端显示的样式 value-format = ‘HH:mm:ss’ 是格式化传值时的样式
2021-11-27 10:18:07
433
原创 返回数据是文档流实现下载功能
const downExModel = async (baseUrl,data) => { let url = baseUrl;//请求路径 let form = document.createElement("form"); form.setAttribute('action', url); form.setAttribute('target', ""); form.setAttribute('method', "post"); form.
2021-10-29 09:06:57
164
原创 JS实现下载功能
exportHtml() { const date = new Date(); // 创建隐藏的可下载链接 var eleLink = document.createElement("a"); eleLink.download = `文件名.文件类型`; eleLink.style.display = "none"; // 字符内容转变成blob地址 var blob = new Blob(["文件内容"]);
2021-10-29 09:05:13
394
原创 东八区指定时间换算时区
let data="2021-10-28 15:30:33" function format(date) { //获取当前时区值，比如北京为东八区则输进8,西5输入-5 var offset = -new Date().getTimezoneOffset()/60; var targetTime = new Date(date); var utc = targetTime.getTime() + (-28800000); //targe.
2021-10-28 17:48:46
1629
原创 vue transition-group闭坑
<transition-group name="flip-list" class="details" tag="div" > < li v-for="item in list"> {{item.name}} </li> </transition-group> data(){ return { list:[ { id:1, name:"1" },{ .
2021-09-14 17:00:41
298
原创 JS实现拖拽效果dragover与dragenter
dragover 使用dragover实现的拖拽效果更加直观，拖拽过程就可以显示最终效果 <ul> <li class="add-item" v-for="(item,index) in list" :key="index" draggable="true" @dragstart="dragstart(item,index)" @dragover="dragover(item,index)" > {{item
2021-09-14 13:51:40
4776
原创 vue 实现滚动加载
data(){ return { page：1, categoryList:[], isLoading:false//防止多次请求 } }, mounted(){ this.scroll() }, methods:{ scroll() { window.addEventListener("scroll", ()=>{ // 距离底部200px时加载一次 let bottomOfW
2021-08-20 14:45:37
653
原创 vue实现不同页面间锚点跳转
A页面跳转至B页面 A页面 <p @click="toAim('auchorId')">内容</p>//auchorId是B页面指定位置的id //先将id存放在本地 toAim(id){ localStorage.setItem("anchorId", id); this.$router.push({ name: "Home",//跳转页面的name,如果目标位置内容是组件则name是父组件的name }); } B页面 create
2021-07-27 13:56:43
1222
原创 原生JS添加行内样式
设置行内样式 <div style="color: blue;>内容内容内容</div> var divEle = document.querySelector('div');//获取标签 var divStyle = divEle.style;//获取行内样式信息 通过style设置 style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息但不包含与外部样式，或嵌入式样式层叠而来的样式 divStyle.style.
2021-07-26 14:45:37
3871
原创 父子通信子组件props接收不到父组件在created中传递的值
原因： 在vue中会首先执行data ==》 template模板 ===》在执行生命周期函数，子组件在生命周期还没执行之前就已经传递所以无法实时更新渲染数据 解决方法： 在子组件上使用v-if确保数据已经生成在传递数据 ...
2021-07-20 09:52:17
713
转载 弹性盒子----子元素宽度失效
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。 该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 根据上述介绍可以理解为默认 1 为开启收缩 所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto; 解决了display:flex下的子元素设置宽度无效的问题。 ...
2021-07-19 13:55:14
2632
转载 qs插件使用
请求数据使用axios发送请求发现后端接收不到参数,需要把参数序列化。 Vue中提供了qs这个插件。 qs.parse()是将URL解析成对象的形式进行数据序列化 qs.stringify()将对象 序列化成URL的形式以&进行拼接 const Qs = require('qs'); let obj= { method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3d
2021-07-16 14:56:11
2002
原创 将master分支合并到本地分支
切换分支到master git checkout master 拉取master分支上的最新内容 git pull 切换到要合并的分支 git checkout wangjy 请求合并 git merge master -m 合并原因
2021-07-06 17:19:04
1085
原创 React
React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> ) } 在开发过程中，我们需要保证某
2021-06-15 08:54:11
165
原创 函数、闭包
js 中万物皆对象 函数 ： 必须被调用才能执行 函数分类： 匿名函数、具名函数、自执行函数 函数声明方式： 通过 function 关键字声明函数： （函数声明式） function 函数名(){} 通过函数表达式声明函数 (函数表达式) let 变量名 = function(){} 两种声明方式的区别： 函数声明式声明函数，可以在函数声明前后调用 : js 优先解析函数的声明和变量的声明 函数表达式声明的函数，必须在函数声明后进行调用，如果在函数声明前调用会报错 （原因是函数存在函数提
2021-05-31 16:05:21
337
原创 函数的继承
继承 面向对象开发： 封装 继承 多态 面向对象开发: 封装 继承 多态 封装： 一、函数方式 二、闭包的方式 三、对象的方式 (面向对象) 1、工厂模式 2、构造函数模式 3、原型模式 4、混合模式（构造函数+原型） 多态：多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成：多态是指通过指向父类的引用，来调用在不同子类中实现的方法 es5的继承的方式 推荐 es6 的 class es5 类： 构造函数 es6 定义类： class 定义class ， 生成实例化对象时依然通过ne
2021-05-31 16:04:00
1323
原创 深拷贝、浅拷贝
深拷贝和浅拷贝 深拷贝：拷贝数据 浅拷贝：拷贝的是地址， 而不是真正的数据 json对象和对象的区别： json对象：json对象是一种轻量级的数据交换格式；专门进行网络传输数据， 服务器给客户端传递的数据都是以json字符串的形式传递 json对象严格的语法格式： 键必须使用双引号进行包裹, 如果值是字符串类型，也必须是双引号 对象（包含所有的对象）：js中万物皆对象 ， 只有对象才拥有属性和方法 对象：数据类型 let obj = {name:’’, say:function(){}} 防抖和节流都是性
2021-05-31 16:02:47
172
原创 防抖和节流
防抖和节流 函数防抖 debounce：用户一直触发事件，事件处理函数是不会执行的，直到用户在指定的时间内不在触发该事件，则执行一次事件处理程序（防抖意味着事件处理程序只会执行性一次） 函数节流 throttle：用户一直触发事件，事件处理函数会每间隔指定的时间后执行一次， 在指定的时间内不会反复执行；（节流意味着事件处理程序每间隔指定的时间执行一次） 防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行 防抖和节流的实现方式： 计时器和时间戳 （为了防止变量污染，通过闭
2021-05-31 16:02:05
215
转载 vue指令----过滤器
vue 渐进式JavaScript 框架 vue 的挂载点 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。 通过 el 属性 设置挂载点 const app = new Vue({ // #app 对应的是页面中的div#app el:'#app' }) 通过显示调用 $mount() 方法 const app = new Vue({ // #app 对应的是页
2021-05-19 19:24:03
421
转载 vue路由
vueRouter $route 和 $router区别 $route 和 $router 不是同一个对象 $route: 代表的是当前路由信息对象（当前的路由） $router: 代表的是路由对象（路由的实例化对象） 路由的配置 引入vue-rotuer.js 文件 <script src='vue.js'></script> <script src='vue-router.js'></script> 创建路由组件模板 每个组件必须存在一个唯一的
2021-04-27 11:56:03
119
原创 vuex
vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（可以理解为对数据进行统一的管理） vuex的核心属性 一共五个核心属性： state, mutations, getters, actions, modules vuex的结构 const store = new Vuex.Store({ state:{ // 通过管理状态(数据) }, mutations:{ // 进行同步操作；修改state的唯一入口 },
2021-04-26 15:42:18
234
原创 Promise(解决回调地狱)
Promise() 对象： 存在三种状态： 进行时 pending 成功 resolve 失败 reject 状态的改变 只能从 pending 转换为 resolve; 或者 从pending 转换为 reject； 如果处于pending状态，永远不知道下一步转换为什么状态 Promise() 接受一个函数作为参数； 函数存在两个参数（这两个参数是js原生提供的） 一个是resolve， 一个是reject Promise()的执行机制： 如果Promise()执行成功，则会调用执行 resolve()
2021-04-22 09:46:35
339
原创 宏任务与微任务
宏任务和微任务： 宏任务： 主线程上的任务都是宏任务 微任务： Promise 的then 宏任务和微任务的分类 宏任务： setTimeout setInterval js主代码 setImmediate(Node) requestAnimationFrame(浏览器) 微任务： process.nextTick (nodejs的方法) Promise的then方法 async与promise结合使用 async 函数调用的位置 很关键 ： 该函数调用是在 promise() 实例化之前 (按照正常的分析
2021-04-01 20:34:38
198
原创 express-generator项目生成器
express-generator 生成器 通过 express的生成器 可以快速搭建一个应用程序的骨架 安装 Node.js 8.2.0 及更高版本 安装 npx express-generator -g 较老的 Node 版本，请通过 npm 将 Express 应用程序生成器安装到全局环境中并执行即可 npm i express-generator -g 安装完成后，可以使用 express 命令 搭建项目; 会自动生成一个项目结构 // 语法规则 express 模板引擎 项目名称 // 案
2021-03-22 20:50:58
623
原创 ejs 模板引擎
ejs ejs 是js的模板引擎， 可以识别一些简单的js语句和使用一些js简单表达式 ejs 的语法 流程控制语句 if语句 <% js代码 %> if语句 // js 的if 语句格式 <% if(条件) { %> // 处理的逻辑 渲染的HTML结构 <% } %> if-else语句 // js 的if 语句格式 <% if(条件) { %> // 处理的逻辑 渲染的HTML结构 <% }else { %> // 处理的
2021-03-22 20:38:10
315
原创 nodejs express框架
express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架 初始化项目 开发项目时，首先需要先初始化项目 ， 执行命令 npm init，为了生成 package.json 文件（项目依赖管理的文件） // 手动配置 （一路enter） npm init // 生成默认配置 npm init -y 安装express npm i express --save 搭建项目结构 直接在 package.json 文件所在的目录下（项目的根目录），创建一个文件app.js(自
2021-03-22 20:37:27
179
原创 nodejs 搭建服务器
通过http模块提供的方法可以创建服务器 引入http模块 （nodejs内置模块， 可以直接引入） 创建服务器let server= http.createServer((req,res)=>{})方法 req:：( request对象)客户端向服务器请求（传递的所有的数据等信息） 简写 req res： (response对象)服务器向客户端进行响应(服务器返回的数据等信息) 简写 res response.end() 方法 返回数据 终止响应 数据作为end()方法的参数 进行返回客户
2021-03-20 17:03:18
390
原创 域名与IP
服务器是没有办法识别域名的， 服务器只能识别IP地址 域名：https://xxx.xxx.com 网址 https://www.baidu.com/ https://baike.baidu.com/· 域名解析： .com 是顶级域名 baidu 一级域名 baike 二级域名 域名分为： 顶级域名： .com .cn .edu .org 一级域名 二级域名 三级、四级域名等 服务器可以识别IP地址 IP地址： x.x.x.x IPv4 IPv6 域名和IP地址是
2021-03-20 16:51:33
1173
原创 nodejs模块划分
nodejs 是运行于服务端的js, 是事件驱动I/O; 集成谷歌的V8引擎 nodejs开发服务端 nodejs的模块 模块的导入和导出 使用CommonJs 规范 1、 内置模块（nodejs 原生提供）可以直接使用 2、 第三方模块 （需要先下载安装然后使用） 3、 自定义模块 (类似于es6的模块，需要定义模块， 进行模块的导入和导出) 模块的导入： require() 1、 导入内置模块 const http = require('http') 2、 导入第三方模块 npm install 模块
2021-03-20 16:48:56
298
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人