- 博客(21)
- 收藏
- 关注
RSS订阅原创 Uncaught (in promise) Error: Redirected when going from “/video“ to “/user“ via a navigation guard.
项目中遇到如下报错内容：Uncaught (in promise) Error: Redirected when going from "/video" to "/user" via a navigation guard.原因：vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误，但并不影响程序功能解决方案一、使用编程式导航跳转时，每次使用，后面都跟上.catch方法，捕获错误信息this.$router.push('/location').catch(e.
2020-12-15 19:56:58
9995
6
原创 什么是路由懒加载？
路由懒加载：整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。传统路由配置：import Vue from 'vue'import VueRouter from 'vue-router'import Login fro
2020-12-11 19:34:31
18498
4
原创 搞懂Vue的作用域插槽---从分析到案例演示
作用域插槽： 就是带数据的插槽，要求在slot上面绑定数据，供将来使用组件时使用 。为什么需要作用域插槽？插槽让我们可以自定制内容，但当我们想给插槽注册事件时，发现行不通，因为具名插槽和匿名插槽都是不携带任何数据的，所以根本获取不到数据项的id。比如这个小demo需求：点击删除按钮，删除对应项：结构分析：插槽里放的是删除按钮，三句歌词是子组件从父组件中接收的，然后遍历数据生成页面。<script> Vue.component('my-music',...
2020-12-06 13:24:06
1275
4
原创 简单搞懂Vue-router里路由的相对路径和绝对路径
什么是路由：路由就是一套映射规则，当url中的哈希值(#hash)发生改变后，路由根据制定好的规则，展示对应的视图内容(组件)vue中，配置路由，分相对路径和绝对路径相对路径和绝对路径的区别：相对路径（不带‘/’）会拼接父级路由，绝对路径（带‘/’）是配置的完整路由，const router = new VueRouter({ routes: [ { path: '/my', //父级路径 component: Info, .
2020-12-04 22:14:07
10142
1
原创 Element-UI做校验进行测试控制台有黄色警告如何解决
在用element-ui做数据校验的时候，可能会遇到小的问题，比如，进行校验测试的时候控制台会出现黄色警告，虽然不影响实际效果，但是，看着还是心里不爽，哈哈情况如下：进行校验测试，控制台不断的警告解决方案：在 node_modules 文件夹中找到如图所指的文件，将右边那行代码注释掉，然后保存刷新浏览器效果，是不是看着舒服多了：...
2020-12-04 10:49:07
3984
1
原创 利用express模块开启本地服务器并区分动态传参和查询字符串传参的差异
一、什么是express模块？express是NodeJs的第三方模块，用于快速搭建服务器，可以看作是http内置模块的升级，相当于jQuery ，对Node.js里的内置HTTP模块不太了解的可以去看我的上篇文章，传送门：https://blog.csdn.net/qq_42805569/article/details/110499476express保留了http模块的基本API,所以，在使用express的时候，也能使用http的API如何使用express模块npm i
2020-12-02 23:39:52
434
原创 如何利用Node.js启动一个本地web服务器
什么是Node.js首先，很多人误以为它是一门新的语言，其实不是哈。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行 环境，并不是一门新的语言。通俗的理解：Node.js为JavaScript代码的正常运行，提供的必要环境，这样说吧： 浏览器是JavaScript的前端运行环境 Node.js是JavaScript的后端运行环境 Node.js开启了我们前端世界的大门，带来了我们今天的大前端时代。 如何利用Node.js创
2020-12-02 21:38:50
6747
2
原创 利用promise简单封装axios函数发送Ajax请求
最近对promise研究比较深入，逐渐也入了迷。关于promise的作用还不太清楚的小伙伴可以先去看我上两篇文章，都有详细说明。https://blog.csdn.net/qq_42805569/article/details/110410469写到博客里是想总结一下，一方面是对知识点的巩固，另一方面是想给promise这块有困惑的伙伴提供一些帮助如有错误，欢迎留言，以便改正。封装一个Ajax请求，我们先搭建原生Ajax发送请求的结构： const xhr =new XMLHttp.
2020-12-01 21:50:40
1069
7
原创 深度解析Promise解决回调函数的原理
接上篇文章：回调函数的嵌套可以让异步代码同步化，但是会造成回调地狱，如何解决。 Promise： 它是书写异步代码的另一种方式，可以解决回调地狱的嵌套问题。 它的状态有三个：pending（等待中）、fulfilled（也叫resolved，成功）、rejected（失败），怎么理解这三种状态呢，这里举个例子：小明：排位吗，带我一个小亮：你太坑了，老是不参团小明：相信我，我的战术已经改进了，这把带你们躺赢一局下来：……分析：小明说，这次带...
2020-11-30 23:36:22
891
1
原创 一篇文章详细介绍什么是回调地狱
回调地狱： 网上很多关于回调地狱的图片，听起来很深奥，其实简单来说就是回调函数的嵌套，那么，什么是回调函数呢？ 回调函数： 把一个函数当作参数传递，传递的是函数的定义并不会立即执行，而是在将来特定的时机再去调用，这个函数就叫做回调函数。 注意：回调函数不会阻塞主线程代码的执行。比如下图控制台打印： 为什么要用到回调函数： 在定时器setTimeout以及Ajax的请...
2020-11-30 21:26:55
5504
8
原创 点击按钮返回页面顶部，jQuery轻松实现
本篇案例实现效果： 当滚动条滚动到一定高度的时候，逐渐显示“返回顶部”图标，点击该图标，动画效果，缓慢滚动到页面顶部。实现原理： jquery 1.scrollTop() ，该方法返回或设置匹配元素的滚动条的垂直位置。 2.fadeIn() 、fadeOut() 动画效果 3.animate（）： 自定义动画实现步骤：创建一个div的盒子，设置背景宽高，固定定位，背景填充图片，以及初始display值...
2020-11-30 09:22:09
981
原创 搞懂JavaScript中访问原型对象的两种方式的不同
1 实例对象.__proto__： 任何对象都有__proto__属性，指向当前构造函数的prototype属性的值，即原型对象。 上面提到的任何对象，数组也是对象，因为数组字面量的底层原理 var arr = new Array() ,也是通过构造函数来实现的，arr就是构造出来的实例对象，通过arr.__proto__可以查看数组原型对象Array上的所有成员方法，然后我们才可以使用原型对象上的方法对数组进行操作。2 构造函数.prototype...
2020-11-28 15:59:34
975
原创 入口函数的作用，以及原生js和jQuery库中的入口函数的不同
我们知道，在编写js代码的时候，如果写在html的文件中，脚本在下载和执行期间会阻止HTML的解析。所以，我们最好把JS的script标签放在body标签内的最后面，这样保证了HTML首先完成解析，页面才能尽快的展现给用户。入口函数的作用： 有了入口函数，js脚本不会阻断HTML的解析，而是先渲染页面再进行js的解析，从而让script标签的位置显得不太那么局限 （不过良好的代码规范还是最好把script标签放在body标签内的最后面），window.onload和jQ的入口...
2020-11-27 13:28:03
1028
5
原创 脚手架创建的vue项目，推不到远程仓库的问题
刚接触vue的小伙伴们，在将项目推到远程仓库的时候，是不是会遇到这个问题：前两步都成功进行，到关键的第三步的时候，推到远程仓库Git报错了hint: not have locally,This is usually caused by another repository pushing这句话翻译：提示：本地没有，这通常是由另一个存储库推送引起的。这是因为，使用脚手架搭建的vue项目，本身就自带.git隐藏文件夹，需要点击查看，勾选“隐藏的项目”，就可以发现。所以我们..
2020-11-25 14:57:54
1030
原创 原生xhr处理字符串编码
在Ajax中，会对发送的数据进行编码上的处理，防止和&特殊符号重复，造成解析错误。下面是我总结的原生xhr编码处理，原生的Ajax穿插到jQuery写法的Ajax中：var xhr =new XMLHttpRequest();xhr.open('POST','请求地址');//post方式要设置请求头xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');var name = encodedU
2020-11-24 19:54:44
563
原创 和v-model一起来理解计算属性的响应式依赖（缓存）的概念
首先，计算属性是一个属性，当却是函数的写法，其实也不难理解，因为是要对数据进行一番操作，避免了都写在模板中，太多的逻辑会让模板过重且难以维护。其次，计算属性不仅便于维护代码，最大的优点是响应式依赖，意思式依赖的数据只要不发生变化，不管被调用多少次，每次都立即返回之前的结果，只有依赖的数据发生改变，才会重新返回新的结果，先上一段代码说话：<div id="app"> <p>{{revers()}}</p> <p>{{revers()}}
2020-11-23 21:16:44
2299
2
原创 一篇带你深入了解vue中的难懂概念 -- 子传父
vue中有父子传值这一概念，即包含父传子，还包括子传父，上篇我的文章中提到了父传子，这次一个案例带你了解比较难懂的子传父。首先，我们根据效果图来分析这个案例实现的主要功能：我们可以根据这幅图了解到，左边是子组件，右边是父组件，子组件中输入内容，转而父组件中同步显示子组件的内容，父组件使用子组件的内容，这个就是实现了子传父这个概念。子传父的原理是事件传值，根据这一原理现在开始我们的代码梳理：1.定义子组件及内容，子组件中要定义组件标签名，因为要传给父组件多个值，所以用对象的方式将数据包裹起
2020-11-23 13:27:15
362
原创 细谈Git指令大全
Git是一款免费、开源的分布式 版本控制系统 ，用于敏捷高效地处理任何或小或大的项目。简单来说，就是我们的代码托管工具，通过git里面的指令，将我们的代码提交到远程仓库进行保管，还可以看到每步操作，以及回退历史版本，下面将我工作中常用的git指令分享给大家，如有描述错误，欢迎指正。项目初始化，一般的话是已经建立好，我们直接克隆仓库地址到本地 git clone 地址git init生成.git文件夹，查看--隐藏的项目就可以看到，为了避免修改，所以默认是隐藏该文件夹，有了.git文件，才可
2020-11-22 16:36:49
108
原创 Vue父子传值这样理解就对了
每一个Vue实例都是一个根组件，基于根组件，我们才能建立子组件，即便子组件是定义在全局里，可是使用的时候组件标签还是要加在Vue实例管辖的区域。所以不管是全局组件和局部组件，都是子组件，而且在Vue中，组件只有父子组件和非父子组件之分，今天跟大家聊聊如何理解父子传值这一概念。1.父子传值，首先父组件准备数据。const vm = new Vue({ el: '#app', data: { msg: '父组件的值--hello vue' }})2.建立子组
2020-11-22 13:12:36
326
原创 从盒子模型来分析CSS3三角形的实现
盒子模型分为两种，第一个是W3C标准的盒子模型（盒模型），第二种是IE标准的盒子模型，也称为怪异盒模型。它们两个的区别：标准盒模型的width指的是内容区域content的宽度，不包括border、padding，而IE盒子定义的width是包括内容+边框+内边距，我们今天从W3C标准的盒模型聊起，如何实现一个三角形。盒子实现的原理就是当盒子的宽高都设置为0，然后通过调整边框的宽度和颜色来实现三角形。1.正方形盒子宽高不为0，且边框都有的情况下：2.盒子宽高都为0，但是边框.
2020-11-21 22:35:46
768
2
原创 CSS3文字阴影属性制作凹凸文字效果
CSS3文字阴影属性制作凹凸文字效果<body> <div class="box">我是凸出来的文字</div> <div class="box">我是凹进去的文字</div></body><style> .box { width: 1000px; height: 200px; background-color:
2020-09-10 09:54:52
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人