- 博客(26)
- 收藏
- 关注
RSS订阅原创 $nextTick在项目中的用处
//组件//swiper.vue<template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> </div></template> .....省略不相关代码......<script>import Swiper fro
2020-12-14 20:50:19
262
1
原创 React中如何改端口号
在package中的scripts，修改start命令为："set port=xxxx & react-scripts start "其中xxxx为端口号，可以自定义
2020-12-10 14:15:35
312
原创 React中的双向绑定简易实现
实现效果如下：简易代码如下class App extends Component{ constructor(){ super() this.state={ xing:'', ming:'' } } //方法 handleInputChange=(e)=>{//这里如果不用箭头函数的话，this就不指向组件了，需要注意 console.log(e.target); //表示是 当前的dom对象 input cons
2020-12-09 21:27:20
275
原创 如何用宝塔在同一个IP下创建多个站点
当我们想在宝塔下添加了一个站点之后（默认端口为80，如：139.224.211.111:80），要再创建一个新站点时（如：139.224.211.111:81）就会报错：这时我们可以借助一些奇技淫巧来突破限制：障眼法！如图所示，在域名的第一行先随便写一个域名+81端口，第二行写真实的想创建的域名站点，点击提交后就可以了。之后在域名管理的地方删除掉用来做挡箭牌的域名，留下真实的即可！...
2020-11-30 21:08:14
7437
8
原创 未获取对应id的dom节点，可直接用id操作dom
今天在vue中写一个操作dom节点的功能时，发现了一个神奇的地方：竟然可以不用获取dom节点，直接使用！例如：//html代码 <div id="app"> <div id="aaa"> </div> </div>//js代码 console.log(app); console.log(aaa);打印如下：网上查询后发现了一点总结：dom元素的id名称不和js内置属性或全局变量重名的话
2020-11-28 11:08:36
426
原创 Vue报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
报错如图所示：其原因是我从父组件向子组件传值时，用props接收之后，我在子组件中直接修改了接收的参数的值。例如：//接收了两个参数：一个数组，一个字符串props:["list","type"]......//做了一些修改,比如合并了一个新数组this.list=this.list.concat(newList)这时候再使用list这个数据就会报错。原因：由于Vue内部的机制，传入的props中的值是不允许被修改的。在新的渲染机制中，当父组件重新渲染时，子组件都被会覆盖，这时的p
2020-11-19 22:12:51
18596
原创 Vue生命周期函数异步获取数据时的问题
由于async await的作用，created生命周期函数会被加入到微任务的事件队列，所以会先继续向下执行其他函数，等执行完了宏任务，最后在执行事件队列中的微任务。beforeCreate() {}, //组件创建之后 async created() { let res = await movieDetail(this.$route.params.filmid); // console.log(res); this.film = res.data.data.film;
2020-11-19 21:52:49
1358
原创 Vue中的报错：TypeError: Cannot read property ‘Name‘ of undefined
部分代码如下：//*************html代码部分 ....省略部分代码....<div class="detail"> <div class="f-name"> <span class="name">{{film.name}}</span> <span class="type" >{{film.item.name}}</span>
2020-11-18 17:31:27
891
1
原创 Dom二级事件的回调函数种类不同导致this指向不同的问题
这两天在用vue脚手架写一个仿卖座网的项目练练手，在写到下滑时的吸顶效果时，无论如何调整都无法实现。效果如图：控制组件是否吸顶的代码：<FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav>组件的data数据： data:function(){ return { fixed:false } },吸顶的css代码：<style scoped la
2020-11-18 11:33:18
309
4
原创 export、export default以及import的异同
先来个总结：1、 两者都可用于导出变量、常量、函数、模块等；2、在一个文件或者模块下，export可以有多个，但是export default只能有一个具体使用方法见下面的案例。第一种情况:不写export和export default（直接导出导入并执行）//exp.js 导出模块的文件let a=1;const b=222;function c(){ console.log(1);}// imp.js 导入模块的文件import xxx from 'exp.js'
2020-11-17 21:05:48
230
原创 Vue组件中的data为什么必须是函数
先上结论：组件是一个个可复用的vue实例。若data是一个普通对象，在组件多次复用时，会共用data，造成数据污染；若data是一个函数，每个组件实例用的是返回对象的一个独立的拷贝（数据副本），互不干扰，避免了数据污染模拟代码如下：//函数返回的是不同的对象，每次调用都开辟新的内存空间function a(){ return { name:'xx', age:22 }}let comp1=a();let comp2=a();console.
2020-11-16 11:33:08
174
2
原创 Vue生命周期钩子函数（详细整理）
图解版：表格版钩子函数特征应用场景beforeCreadted（Vue刚出生）vue实例的挂载元素$el、数据对象data以及methods都没有初始化加loading事件createdvue实例的数据对象data和methods初始化完成，但$el还没有结束loading、请求数据为mounted渲染做准备beforeMountvue实例的$el和data都初始化了（模板编译好了，但没有渲染），但还是虚拟的dom节点，具体的data.filter还未替换。
2020-11-14 11:16:12
265
原创 $route和$router的区别详解
总的来说，$ router是用来操作路由的，$ route是用来获取路由信息的。1.$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）常用的跳转连接的方法：//常规方法this.$router.push("/login");//使用对象的形式 不带参数this.$router.push({ path:"/login" });//使用对象的形式，参数为地址栏上的参数this.$router.push({ p
2020-11-13 11:10:05
11258
原创 Vue中列表和对象渲染中的坑（动态修改实时显示）
渲染列表时：需求是点击按钮后修改值为1000，如图所示：先看以下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
2020-11-10 20:52:06
627
原创 Router.use() requires a middleware function but got a Object；This is probably not a problem with npm
使用express框架时创建路由，运行后发现报了这个错误，排查之后才发现是没有导出路由，要在路由的文件下加上：module.exports=router;另一个常见的错误是文件开头没有引入相关模块,看看缺少什么模块然后用npm install 安装即可解决。...
2020-11-08 22:39:59
671
原创 nodeJS操作mongoDB指南
目录结构如下：其中db.js为数据库的连接模块，collection下的User.js是创建mongoDB中的集合模块，sql.js为集合的增删改查的操作模块。db.js代码如下：const mongoose=require('mongoose');//连接数据库mongoose.connect('mongodb://localhost:27017/overwatch',{ useNewUrlParser: true,useUnifiedTopology: true });//注意这里的两个tr
2020-11-04 21:47:06
333
原创 mongoDB启动命令以及增删改查操作
开启mongodb：在安装mongodb的位置（在bin目录下，如C:\Program Files\MongoDB\Server\4.0\bin），打开cmd，运行如下命令：mongod ‐‐dbpath D:data //没有这个data文件自己建立一个再到D盘的data文件夹中另外打开一个cmd，输入mongo，成功后 输入show dbs查看所有数据库的名称。也可以用另一种方便的操作，不要每次都去bin目录下运行开头的命令：新建文本文档写入 mongod ‐‐dbpath e:dat
2020-11-04 16:51:22
260
原创 记伪数组遍历时无法完整遍历的bug
今天在写购物车页面多选删除时遇到了一个之前从没在意过的bug。当我选中2个及以上的商品点击删除时，只能删除1个或者一小部分商品，这就让我很费解了：以前for循环遍历删除节点都没问题呀，今天的问题出在哪了呢？经过一系列排查，发现获取到的节点集合不能直接遍历，可能有时候会侥幸得到正确的结果，但是总有栽坑的时候。所以需要转为真数组之后再遍历。示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="
2020-10-29 15:39:50
378
原创 git常用命令
git仓库分为3个区：工作区 ：书写代码的地方，工作的目录就是工作区。暂存区：暂时存储的区域。因为代码无法直接从工作区提交到仓库区，而是需要先从工作区添加到暂存区，然后再从暂存区提交到仓库区，避免了误操作。本地仓库区：将保存在暂存区域的内容永久转储到 Git 仓库中，生成版本号。生成版本号之后，就可以任何的回退到某一个具体的版本。git基本命令git init //初始化仓库， 在当前目录下生成一个隐藏文件夹.gitgit status //查看文件的状态.红色表示工作区中的文件，绿色表示
2020-10-22 19:21:33
103
原创 promise使用中的关键问题和注意点
1.改变promise状态和指定回调函数谁先谁后？1、都有可能。正常情况下是先指定回调函数再改变状态，但是也可以改变状态再指定回调。如何先改状态再指定回调函数？1）在执行器中直接调用resolve()或reject();2）执行器中设置一个延时器，之后再调用then();如何先指定回调函数再改状态？1、先指定回调函数后，会保存当前指定的回调函数，当状态发送改变之后，回调函数就会调用，得到数据；2、先改变状态，当指定回调函数时，回调函数就会调用，得到数据。注：.then()中的回调函数是异步执
2020-10-19 14:25:03
364
原创 JavaScript的promise详解
promise详解promise是什么？为什么要用promise？如何使用promise？promise是什么？抽象解释：是js中进行异步编程的新的解决方案。（旧的是纯回调的形式，会进入回调地狱）要点：1、语法上，promise是一个构造函数；功能上，promise对象用来封装一个异步操作并获取执行的结果。2、它有三种状态，pending（打包中，创建promise对象后的状态） resolved（成功） rejected（失败）。3、一个promise对象只能改变一次状态，成功或者失败后都会
2020-10-18 13:29:28
1668
1
原创 js中对象的浅拷贝和深拷贝方法
在了解浅拷贝和深拷贝之前，我们先了解一下javascript的变量的存储方式：栈（stack）和堆（heap）栈：自动分配内存空间，系统自动释放，存放的是基本数据类型以及引用数据类型的引用（内存地址）堆：动态的分配内存，大小不定，不会自动释放，存放的是引用类型的值。浅拷贝浅拷贝只是拷贝了指针，拷贝后两个指针指向同一块内存空间//先声明一个对象var obj={ name:'张三', age:18, say(){
2020-10-16 15:01:11
371
1
原创 js常见的错误以及处理方式
常见错误类型Error 所有错误的父类型ReferenceError 引用的变量不存在（xx is not defined）TypeError 数据类型不正确（a,xx is not a function; Cannot read property xx of undefined）RangeError 数据值不在允许的范围内（Maximu call stack size exceeded）SyntaxError 语法错误（Unexpected xx）错误处理捕获错误 try…catch
2020-10-16 10:35:04
230
原创 js中回调函数的类型
回调函数：是我们手动定义的我们不调用自动调用分为两种：同步回调立即执行，完全执行完了才结束，不会放入回调队列，一上来就执行完例如：数组遍历相关的回调函数/promise的excutor函数// 同步回调var arr=[1,3,4];arr.forEach(ele=>{console.log(ele)})console.log('之后打印的')//结果：先打印1,3，4 再打印“之后打印的”异步回调不会立即执行，会放入回调队列中，将来执行例如：定时器/ajax/pr
2020-10-16 09:50:31
327
原创 利用jquery实现视频网站简单的弹幕效果
效果如图所示*完整代码如下下面展示一些 内联代码片。<!doctype html><html><head> <meta charset="utf-8"> <title></title> <script src="../jquery-2.2.4.js"></script> <style type="text/css"> html, body { margin
2020-10-15 21:16:31
310
原创 淘宝和京东轮播图的实现
淘宝轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
2020-10-14 19:11:17
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人