- 博客(43)
- 收藏
- 关注
原创 原生js实现时间罗盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-04-18 11:05:50
354
1
原创 vue 函数式组件
函数式组件定义组件没有管理任何状态 也没有监听任何传递给它的状态 也没有生命周期方法时 可以将组件标记为functional 这意味它无状态(没有响应式数据) 也没有实例(没有this上下文)Vue.component('heading', { functional: true, //标记函数式组件 props: ['level', 'title', 'icon'], render(h, context) { //context上下文传参 let children = []; // 属.
2021-02-14 15:07:07
1858
原创 vue插槽
具名插槽如果一个组件要插入多部分内容那么就要用到 具名插槽 具体位置插入指定内容<Abb> <template v-slot:title> <h1>hello1</h1> </template> <template v-slot:age> <h1>hello2</h1> </template></Abb>Abb组件内容里就要有两个与之对应的模块<div
2021-02-13 12:24:51
565
原创 vue动画详解
在我们开发中会往往遇到一些过渡效果 那么此时就会用到动画 于是呢就总结了以下 关于vue动画的使用方法过渡类名 (动画基础)<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="fade"> <p v-if="show">hello</p> </transi.
2021-02-06 16:50:39
630
原创 uni-app开发遇到的坑
上传图片注意:小程序时必须要写header:{“Content-Type”: “multipart/form-data”}, h5是必须省略 chooseImg(){ let that = this uni.chooseImage({ count: 1, success: (res)=> { const tempFilePaths = res.tempFilePaths[0]; uni.uploadFile({
2021-02-05 18:01:59
1094
1
原创 微信网页JSAPI支付
微信jspi支付只适用于微信内部浏览器使用 JSAPI支付官方文档主要流程分以下一个步骤1.根据官方文档的(开发步骤)进行一些相应的配置(域名)2.进入支付界面后立即执行以下代码window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + url + .
2021-02-02 21:09:45
1021
1
原创 组件化探讨 (面试题)
组件化的Vue的精髓,Vue应用就是由一个个组件构成 Vue的组件化涉及到的内容非常多 当面试时被面试官问到:谈一下你对Vue组件化的理解 这时候有可能无从下手 可以从以下几点进行阐述:定义:组件是可复用的vue实例 准确讲他们是VueComponent的实例 继承自Vue优点:从上面案例可以看出组件化可以增加代码的复用性 可维护性和可预测性使用场景:什么时候使用组件?以下分类可作为参考: - 通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。 - 业务.
2021-01-06 12:13:55
598
原创 uniapp /deep/设置uni-app组件样式时 h5生效 小程序失效问题解决
今天写uni-app的项目 设置uni-app扩展组件的样式 使用穿透/deep/ 发现小程序没有效果 h5有效果//小程序无效 h5生效 /deep/ .uni-list-item .uni-list-item__container .uni-list-item__content .uni-list-item__content-title{ color: #333333; font-size: 32upx; }加入一下代码后 h5 和小程序 都生效//与methods .
2021-01-05 20:01:24
4957
6
原创 微信小程序授权登录
微信小程序有三种授权登录方式三种方式虽然不同但是百变不离其中 基本原理还是一样的一次性授权常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口,但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息(头像,昵称等;永久授权在不必要使用用户公开信息(头像,昵称等)时,不调取授权登录接口,只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库,这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息
2021-01-01 20:50:43
2477
原创 vue.js中如何导出excel表格
安装依赖npm i file-saver xlsx -Snpm i script-loader -D导入俩个js文件下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件Blob.js文件(function (view) { "use strict"; view.URL = view.URL || view.webkitURL; if (view.Blo.
2020-10-07 16:43:56
795
原创 echarts超出容器宽度问题的解决办法
在使用vue+iview+echarts时,出现了echarts图标刷新页面会超出容器宽度的问题 如下图所示:html代码如下:<a-col class="gutter-row" :span="6"> <div class="gutter-box echarts_col"> <div class="echarts_top"><p>浏览量</p> <p>6666</p> </div>
2020-09-24 16:07:54
6264
1
原创 响应css媒体查询 插件(enquire.js)
https://www.cnblogs.com/holajulie/p/7891354.html
2020-09-24 11:25:13
389
原创 vue跳转到子路由时报错error:Redirected from “/login“ to “/index“ via a navigation guard 已解决
方法一npm nui vue-routernpm i vue-router@3.3.1 -S如果还是不行 就使用方法二方法二在router文件夹下面的index文件中添加如下代码 :const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) re.
2020-09-19 15:09:51
11786
3
原创 vue ant Design 中如何修改 modal组件的样式
在vue项目中 单纯的给modal组件添加样式 你是无从下手的 但是办法还是有的 antd提供的有一个可以把modal挂在到dom上的方法 利用ref 使用antd组件提供的getContainer方法 把modal挂载到dom上 这样就可以根据 根据dom的类名 去给modal组件添加样式了 <div class="reply" ref = 'replayModal'> <a-modal :getContaine.
2020-08-14 21:41:40
8007
5
原创 在vue中是用wacth监听路由的变化
watch不仅能监听data数据 还可以监听路由的变化 在项目中可以配合一些组件使用 watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ console.log('欢迎进入登录页面'); } else if(newVal === '/register'){ .
2020-07-23 15:24:22
123
原创 跨域请求传递cookie问题
通过CORS跨域时,浏览器不会自动带上cookie。想要传递cookie,需要客户端与服务端共同设置。需要解决两个方面的问题1.服务端需要设置 Access-Control-Allow-Origin该字段表明服务端接收哪些域名的跨域请求,如果值为 * 号,表示接收任意域名的跨域请求。当需要传递cookie时,Access-Control-Allow-Origin 不能设置为 * 号,必...
2020-04-18 20:57:31
724
原创 正则表达式exec和match的区别
两者的相同点就是 返回的都是数组不同点exec1.返回一个数组 第一个参数是正则匹配的结果 其中还有index匹配的位置 input:正则所匹配的原字符串2.如果字符串有多个和正则匹配的片段 则正则 第一次 匹配只能匹配最近的片段 var str = "fnksdfkjd" var reg = /([\w]){1,3}/g console.lo...
2020-04-18 17:16:20
171
原创 create-react-app的两种跨域解决方式
我们可以在node-modules/react-scripts/webpack-dev-server.js文件直接配置proxy选项但是后续如果继续安装其他模块的话 yarn 内部会检测 有没有文件被改动 若有改动恢复原样两种解决方式1. 弹射配置文件使用 yarn eject 命令 将react-scripts中一些重要的配置文件弹射出来然后对文件config/webpackDe...
2020-04-18 11:42:28
2319
原创 jsx的语法规范
1.标签必须要闭合 <input />2.最外层只能有一个根元素3.className <div className={flag?'red':''}></div>4.style={{}} <div style={{backgroundColor:'red'}}></div>5.onClick <...
2020-04-18 11:23:38
206
原创 React生命周期钩子函数
挂载阶段当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:constructor() 只在实例化时执行一次static getDerivedStateFromProps() 初始化 时执行 数据改变也执行render() 初始化 时执行 数据改变也执行componentDidMount() 挂载完毕执行 一般在这里 进行ajax请求注意:下述生命周...
2020-04-17 17:42:25
239
原创 今日写项目遇到的几个问题
1.用active-class添加选中样式 第一个导航按钮 选中或不选中 都有样式<ul> <router-link v-for="data in tabList" :key="data.id" ...
2020-04-10 22:26:50
114
原创 闭包经典面试题
function fun(n,o){ console.log(o) return{ fun:function(m){ return fun(m,n) } } } var a = fun...
2020-03-29 18:08:48
234
原创 自定义指令及指令钩子
自定义指令有两种 :全局自定义指令 和 局部自定义指令全局自定义指令Vue.directive('fous',{ // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})局部自定义指令directives: { focus: { // 指令的定义 ...
2020-03-29 17:28:26
394
原创 vue路由守卫
全局路由守卫前置守卫在进入路由之前执行beforeEach(to,from,next){ //to 即将要进入的目标路由对象 //from 导航要离开的路由对象 //next() //这里要使用next放行 否则无法创建实例}后置守卫在离开路由的时候执行afterEach(to.from){ //}局部路由守卫是在路由配置页面单独给路由配置的守卫...
2020-03-29 16:49:43
614
原创 vue的生命周期
beforeCreate(创建前)beforeCreate(实例初始化前)状态:实例初始化之后 组件被创建时 这时候数据都是undefined场景:可以加入loading事件created(创建后)created(实例初始化后)状态:实例创建完成后,data、methods 被初始化场景:结束 loading 事件;推荐这个时候发送请求数据,尤其是返回的数据与绑定事件有...
2020-03-24 18:40:14
76
原创 虚拟dom和diff算法
虚拟DOM ( virtual dom )用一个简单的对象去替代复杂的dom对象,存储了对应dom的一些重要参数,在改变dom之前,会先比较相应虚拟dom的数据,如果需要改变,才会将改变应用到真实dom上。Diff算法 ( 差异算法 )可以用新渲染的对象树去和旧的树进行对比,记录这两棵树差异,记录下来的不同就是我们需要对页面真正的DOM操作,然后把他们应用在真正的DOM树上,...
2020-03-23 21:42:51
162
原创 计算属性和watch
计算属性compulate可以监听多个变量 watch只能监听一个变量compulate有两个方法:get 和 set 当计算属性改变时会触发set函数compute var vm = new Vue({ el:"#app", data:{ firstname:"李", lastname:"四", ...
2020-03-20 19:37:35
606
原创 今日份vue.js总结
v-model实现原理给输入框绑定value动态属性 绑定input事件(变量=输入框里面的值)<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">Vue.set()与splice()用法与作用这两个方法都是用改改变数组 更新视图的Vue.set(vm.arr,ind...
2020-03-19 19:16:15
66
原创 vue的双向数据绑定原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view.当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需要,viewModel 会通过a...
2020-03-18 18:25:46
82
原创 node.js写登录接口
var express = require('express');var router = express.Router();var mongodb = require("../../utils/mongodb")var bcrypt = require("../../utils/bcrypt")var jwt = require("../../utils/jwt")/* GET hom...
2020-03-17 18:26:34
2206
1
原创 封装后端查询数据的模块(用于购物车实现)
封装模块const mongodb = require("mongodb")//实例化const mongodCt = mongodb.MongoClient//把字符串转成ObjectId的对象类型 const ObjectId = mongodb.ObjectIdlet open = ({ dbName = "student", collectionName, url =...
2020-03-16 20:40:03
265
原创 node.js 总结
node.js总结模块的引入const module = require("模块名称")fs模块文件的异步读取//fs.readFile('地址',回调函数) fs.readFile("./html/index.html","utf-8",(err,data)=>{ console.log("err",err) //如果文件读取成功,err就是null ...
2020-03-15 08:39:35
230
原创 mongodb (非关系型数据库)
下载mongodb安装库的操作查所有库:show dbs查看当前数据库 : db创建库:use 库名 (没有此库就是新建库 有就切换)删除库 db.dropDatabase() 删除当前库集合的操作创建集合: db.createCollection(“集合名”,{配置})配置:{size:文件大小,capped:true,max:条数|文档数 }capped定量...
2020-03-13 18:48:18
216
原创 node.js (token 文件上传 后端渲染 jade ejs)
token思想在服务端不需要存储用户的登录记录,全部发给客户端有客户端自己存(cookie,local)1、客户端使用用户名跟密码请求登录2、服务端收到请求,去验证用户名与密码3、验证成功后,服务端会签发一个 Token(加了密的字符串),再把这个 Token 发送给客户端4、客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里...
2020-03-12 18:22:14
245
原创 node.js (express cookie-session)
express二次封装 非侵入式 增强型搭建web服务器let express = require("express")let server = require()server.listen(端口,地址,回调)静态资源托管server.use(express.static("./www"))接口响应server.get(url,(req,res,next...
2020-03-11 18:59:04
319
原创 node.js (npm nrm yarn bower )
模块化 commonJScommnJs 是一个我规范 主要为了js在后端的表现而制定注意 :commonJS是nodejs默认模块管理方式 不支持es6的模块化管理方式 但是支持所有es6+语法node.js 的模块主要分为三种 :内置模块 node本身自带的模块第三方模块 别人封装好的模块 需要用 (npm install -g 模块名)下载到项目中 自定义...
2020-03-10 20:49:16
224
原创 初识node.js
模块的引入const module = require("模块名称")fs模块文件的异步读取//fs.readFile('地址',回调函数) fs.readFile("./html/index.html","utf-8",(err,data)=>{ console.log("err",err) //如果文件读取成功,err就是null console.l...
2020-03-09 20:47:43
118
原创 超级详细的jQuey总结
普通选择器$(“ul”) 获取页面所有的ul标签$(“ul>li:nth-child(1)”) 获取ul子元素中的第一个子元素$(“ul>li:last-child”) 获取ul子元素中的最后一个子元素$(“ul>li.a”) 获取ul下面li里面类名为a的元素$(“li:nth-child(odd)”) 获取li里面的第奇数个元素$(“li:nth-child(...
2020-03-08 20:26:40
231
原创 怎样写css更简单快捷 (css的预编译语言sass)
理解SASS1.用来编译css的 使css代码编写 更加简洁方便2.sass和css的区别css文件的后缀名使.csssass文件后缀名是.sass 或者 .scss< sass文件和scss文件区别1.scss文件语法和css文件基本一致2.sass文件里面就没有大括号 和 分号 依靠缩进来维持关系3.但是这两种文件编译后和css文件一样3.sass全局工具安装 npm i -...
2020-03-06 09:41:13
181
原创 利用jQuery渲染二级菜单
1.本地写一个json文件 用来存放数据 模拟请求本地json数据二级菜单的json数据格式如下:[ { "id":1, "name":[ "手机","运营商","智能数码" ], "list":[ { "id":101, "lis...
2020-03-04 21:43:40
573
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人