- 博客(74)
- 收藏
- 关注
RSS订阅原创 element ui el-select默认值闭坑
当默认值是value：【选项的值，】时，要想渲染的数据是label：【选项的标签，】,需注意，默认值的数据类型必须与option遍历数据的value数据类型一致
2022-06-07 15:58:49
377
原创 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
1854
原创 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
676
原创 使用日期（时间）选择器时格式化数据
format = ‘HH:mm:ss’是格式化前端显示的样式value-format = ‘HH:mm:ss’是格式化传值时的样式
2021-11-27 10:18:07
382
原创 返回数据是文档流实现下载功能
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
123
原创 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
325
原创 东八区指定时间换算时区
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
1346
原创 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
244
原创 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
4666
原创 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
595
原创 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
1148
原创 原生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
3762
原创 父子通信子组件props接收不到父组件在created中传递的值
原因：在vue中会首先执行data ==》 template模板 ===》在执行生命周期函数，子组件在生命周期还没执行之前就已经传递所以无法实时更新渲染数据解决方法：在子组件上使用v-if确保数据已经生成在传递数据...
2021-07-20 09:52:17
648
转载 弹性盒子----子元素宽度失效
因为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
2489
转载 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
1905
原创 将master分支合并到本地分支
切换分支到mastergit checkout master拉取master分支上的最新内容git pull切换到要合并的分支git checkout wangjy请求合并git merge master -m 合并原因
2021-07-06 17:19:04
999
原创 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
126
原创 函数、闭包
js 中万物皆对象函数： 必须被调用才能执行函数分类：匿名函数、具名函数、自执行函数函数声明方式：通过 function 关键字声明函数： （函数声明式） function 函数名(){}通过函数表达式声明函数 (函数表达式) let 变量名 = function(){}两种声明方式的区别：函数声明式声明函数，可以在函数声明前后调用 : js 优先解析函数的声明和变量的声明函数表达式声明的函数，必须在函数声明后进行调用，如果在函数声明前调用会报错（原因是函数存在函数提
2021-05-31 16:05:21
276
原创 函数的继承
继承面向对象开发： 封装 继承 多态面向对象开发: 封装 继承 多态封装：一、函数方式二、闭包的方式三、对象的方式 (面向对象)1、工厂模式2、构造函数模式3、原型模式4、混合模式（构造函数+原型）多态：多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成：多态是指通过指向父类的引用，来调用在不同子类中实现的方法es5的继承的方式 推荐 es6 的 classes5 类： 构造函数es6 定义类： class定义class ， 生成实例化对象时依然通过ne
2021-05-31 16:04:00
1246
原创 深拷贝、浅拷贝
深拷贝和浅拷贝深拷贝：拷贝数据浅拷贝：拷贝的是地址， 而不是真正的数据json对象和对象的区别：json对象：json对象是一种轻量级的数据交换格式；专门进行网络传输数据， 服务器给客户端传递的数据都是以json字符串的形式传递json对象严格的语法格式： 键必须使用双引号进行包裹, 如果值是字符串类型，也必须是双引号对象（包含所有的对象）：js中万物皆对象 ， 只有对象才拥有属性和方法对象：数据类型 let obj = {name:’’, say:function(){}}防抖和节流都是性
2021-05-31 16:02:47
130
原创 防抖和节流
防抖和节流函数防抖 debounce：用户一直触发事件，事件处理函数是不会执行的，直到用户在指定的时间内不在触发该事件，则执行一次事件处理程序（防抖意味着事件处理程序只会执行性一次）函数节流 throttle：用户一直触发事件，事件处理函数会每间隔指定的时间后执行一次， 在指定的时间内不会反复执行；（节流意味着事件处理程序每间隔指定的时间执行一次）防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行防抖和节流的实现方式： 计时器和时间戳 （为了防止变量污染，通过闭
2021-05-31 16:02:05
147
转载 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
365
转载 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
74
原创 vuex
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式（可以理解为对数据进行统一的管理）vuex的核心属性一共五个核心属性： state, mutations, getters, actions, modulesvuex的结构const store = new Vuex.Store({ state:{ // 通过管理状态(数据) }, mutations:{ // 进行同步操作；修改state的唯一入口 },
2021-04-26 15:42:18
173
原创 Promise(解决回调地狱)
Promise() 对象：存在三种状态：进行时 pending成功 resolve失败 reject状态的改变 只能从 pending 转换为 resolve; 或者 从pending 转换为 reject； 如果处于pending状态，永远不知道下一步转换为什么状态Promise() 接受一个函数作为参数； 函数存在两个参数（这两个参数是js原生提供的） 一个是resolve， 一个是rejectPromise()的执行机制：如果Promise()执行成功，则会调用执行 resolve()
2021-04-22 09:46:35
267
原创 宏任务与微任务
宏任务和微任务：宏任务： 主线程上的任务都是宏任务微任务： Promise 的then宏任务和微任务的分类宏任务：setTimeoutsetIntervaljs主代码setImmediate(Node)requestAnimationFrame(浏览器)微任务：process.nextTick (nodejs的方法)Promise的then方法async与promise结合使用async 函数调用的位置 很关键 ： 该函数调用是在 promise() 实例化之前 (按照正常的分析
2021-04-01 20:34:38
148
原创 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
556
原创 ejs 模板引擎
ejsejs 是js的模板引擎， 可以识别一些简单的js语句和使用一些js简单表达式ejs 的语法流程控制语句 if语句 <% js代码 %>if语句// js 的if 语句格式<% if(条件) { %>// 处理的逻辑 渲染的HTML结构<% } %>if-else语句// js 的if 语句格式<% if(条件) { %>// 处理的逻辑 渲染的HTML结构<% }else { %>// 处理的
2021-03-22 20:38:10
240
原创 nodejs express框架
express基于 Node.js 平台，快速、开放、极简的 Web 开发框架初始化项目开发项目时，首先需要先初始化项目 ， 执行命令 npm init，为了生成 package.json 文件（项目依赖管理的文件）// 手动配置 （一路enter）npm init // 生成默认配置npm init -y 安装expressnpm i express --save搭建项目结构直接在 package.json 文件所在的目录下（项目的根目录），创建一个文件app.js(自
2021-03-22 20:37:27
133
原创 nodejs 搭建服务器
通过http模块提供的方法可以创建服务器引入http模块 （nodejs内置模块， 可以直接引入）创建服务器let server= http.createServer((req,res)=>{})方法req:：( request对象)客户端向服务器请求（传递的所有的数据等信息） 简写 reqres： (response对象)服务器向客户端进行响应(服务器返回的数据等信息) 简写 resresponse.end() 方法 返回数据 终止响应数据作为end()方法的参数 进行返回客户
2021-03-20 17:03:18
327
原创 域名与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.xIPv4 IPv6域名和IP地址是
2021-03-20 16:51:33
1103
原创 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
214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人