_前端小哥_-CSDN博客

原创原生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 311 1

函数式组件定义组件没有管理任何状态也没有监听任何传递给它的状态也没有生命周期方法时可以将组件标记为functional 这意味它无状态(没有响应式数据) 也没有实例（没有this上下文）Vue.component('heading', { functional: true, //标记函数式组件 props: ['level', 'title', 'icon'], render(h, context) { //context上下文传参 let children = []; // 属.

2021-02-14 15:07:07 1828

原创 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 543

原创 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 619

原创 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 1083 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 1009 1

原创组件化探讨（面试题）

组件化的Vue的精髓，Vue应用就是由一个个组件构成 Vue的组件化涉及到的内容非常多当面试时被面试官问到：谈一下你对Vue组件化的理解这时候有可能无从下手可以从以下几点进行阐述：定义：组件是可复用的vue实例准确讲他们是VueComponent的实例继承自Vue优点：从上面案例可以看出组件化可以增加代码的复用性可维护性和可预测性使用场景：什么时候使用组件？以下分类可作为参考： - 通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等。 - 业务.

2021-01-06 12:13:55 591

原创 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 4864 6

原创微信小程序授权登录

微信小程序有三种授权登录方式三种方式虽然不同但是百变不离其中基本原理还是一样的一次性授权常规写法，需要获取用户公开信息（头像，昵称等）时，判断调取授权登录接口，但是此方法如果不经处理的话用户如果拒绝授权或者删除该微信小程序后需要重新调取并获取用户公开信息（头像，昵称等；永久授权在不必要使用用户公开信息（头像，昵称等）时，不调取授权登录接口，只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库，这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息

2021-01-01 20:50:43 2450

原创 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 768

原创 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 6216 1

原创响应css媒体查询插件(enquire.js)

https://www.cnblogs.com/holajulie/p/7891354.html

2020-09-24 11:25:13 367

原创 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 11764 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 7927 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 110

原创跨域请求传递cookie问题

通过CORS跨域时，浏览器不会自动带上cookie。想要传递cookie，需要客户端与服务端共同设置。需要解决两个方面的问题1.服务端需要设置 Access-Control-Allow-Origin该字段表明服务端接收哪些域名的跨域请求，如果值为 * 号，表示接收任意域名的跨域请求。当需要传递cookie时，Access-Control-Allow-Origin 不能设置为 * 号，必...

2020-04-18 20:57:31 700

原创正则表达式exec和match的区别

两者的相同点就是返回的都是数组不同点exec1.返回一个数组第一个参数是正则匹配的结果其中还有index匹配的位置 input:正则所匹配的原字符串2.如果字符串有多个和正则匹配的片段则正则第一次匹配只能匹配最近的片段 var str = "fnksdfkjd" var reg = /([\w]){1,3}/g console.lo...

2020-04-18 17:16:20 158

原创 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 2290

原创 jsx的语法规范

1.标签必须要闭合 <input />2.最外层只能有一个根元素3.className <div className={flag?'red':''}></div>4.style={{}} <div style={{backgroundColor:'red'}}></div>5.onClick &lt...

2020-04-18 11:23:38 197

原创 React生命周期钩子函数

挂载阶段当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor() 只在实例化时执行一次static getDerivedStateFromProps() 初始化时执行数据改变也执行render() 初始化时执行数据改变也执行componentDidMount() 挂载完毕执行一般在这里进行ajax请求注意:下述生命周...

2020-04-17 17:42:25 220

原创今日写项目遇到的几个问题

1.用active-class添加选中样式第一个导航按钮选中或不选中都有样式<ul> <router-link v-for="data in tabList" :key="data.id" ...

2020-04-10 22:26:50 108

原创闭包经典面试题

function fun(n,o){ console.log(o) return{ fun:function(m){ return fun(m,n) } } } var a = fun...

2020-03-29 18:08:48 212

原创自定义指令及指令钩子

自定义指令有两种：全局自定义指令和局部自定义指令全局自定义指令Vue.directive('fous',{ // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})局部自定义指令directives: { focus: { // 指令的定义 ...

2020-03-29 17:28:26 368

原创 vue路由守卫

全局路由守卫前置守卫在进入路由之前执行beforeEach(to,from,next){ //to 即将要进入的目标路由对象 //from 导航要离开的路由对象 //next() //这里要使用next放行否则无法创建实例}后置守卫在离开路由的时候执行afterEach(to.from){ //}局部路由守卫是在路由配置页面单独给路由配置的守卫...

2020-03-29 16:49:43 603

原创 vue的生命周期

beforeCreate(创建前)beforeCreate(实例初始化前)状态：实例初始化之后组件被创建时这时候数据都是undefined场景：可以加入loading事件created（创建后）created（实例初始化后）状态：实例创建完成后，data、methods 被初始化场景：结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有...

2020-03-24 18:40:14 71

原创虚拟dom和diff算法

虚拟DOM ( virtual dom )用一个简单的对象去替代复杂的dom对象，存储了对应dom的一些重要参数，在改变dom之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上。Diff算法 ( 差异算法 )可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把他们应用在真正的DOM树上，...

2020-03-23 21:42:51 143

原创计算属性和watch

计算属性compulate可以监听多个变量 watch只能监听一个变量compulate有两个方法:get 和 set 当计算属性改变时会触发set函数compute var vm = new Vue({ el:"#app", data:{ firstname:"李", lastname:"四", ...

2020-03-20 19:37:35 597

原创今日份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 56

原创 vue的双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。这里的vm 就是vue框架，它相当于中间枢纽的作用,连接着model 和view.当前台显示的view发生变化了，它会实时反应到viewModel上，如果有需要，viewModel 会通过a...

2020-03-18 18:25:46 75

原创 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 2122 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 258

原创 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 218

原创 mongodb (非关系型数据库)

下载mongodb安装库的操作查所有库:show dbs查看当前数据库 : db创建库:use 库名（没有此库就是新建库有就切换）删除库 db.dropDatabase() 删除当前库集合的操作创建集合: db.createCollection(“集合名”,{配置})配置:{size:文件大小,capped:true,max:条数|文档数 }capped定量...

2020-03-13 18:48:18 204

原创 node.js (token 文件上传后端渲染 jade ejs)

token思想在服务端不需要存储用户的登录记录，全部发给客户端有客户端自己存(cookie,local)1、客户端使用用户名跟密码请求登录2、服务端收到请求，去验证用户名与密码3、验证成功后，服务端会签发一个 Token（加了密的字符串），再把这个 Token 发送给客户端4、客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里...

2020-03-12 18:22:14 238

原创 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 311

原创 node.js (npm nrm yarn bower )

模块化 commonJScommnJs 是一个我规范主要为了js在后端的表现而制定注意：commonJS是nodejs默认模块管理方式不支持es6的模块化管理方式但是支持所有es6+语法node.js 的模块主要分为三种：内置模块 node本身自带的模块第三方模块别人封装好的模块需要用 (npm install -g 模块名)下载到项目中自定义...

2020-03-10 20:49:16 201

原创初识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 111

原创超级详细的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 205

原创怎样写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 174

原创利用jQuery渲染二级菜单

1.本地写一个json文件用来存放数据模拟请求本地json数据二级菜单的json数据格式如下：[ { "id":1, "name":[ "手机","运营商","智能数码" ], "list":[ { "id":101, "lis...

2020-03-04 21:43:40 564 1

空空如也

空空如也