- 博客(45)
- 收藏
- 关注
RSS订阅原创 Vue中登陆超时，返回登陆页面
首先登陆时，将登陆接口返回的 token 用 localStorage 保存起来，然后在 axios 的请求拦截里将 token 添加到请求头部 header 里，作为之后前后端的通信票据// axios 请求设置 请求拦截器axios.interceptores.request.use(config => { var data = {} if(typeof(config.data) === 'string'){ // 如果拦截到请求中data 为 string 类型，则执行其中的代码 .
2021-08-20 17:56:45
2499
原创 Vue 强制刷新组件
使用 vue 进行开发时，如果要刷新当前路由，则调用 router.go(0)方法即可。但是某些情况下，我们可能要求仅仅刷新某个组件，而不是路由。。。遇到的问题由于渲染数据较多，导致页面中部分数据没有来得及更新解决方法使用 v-if 指令因为只是刷新某个子组件，我用了 v-if 指令的特性，强制刷新组件。当 v-if 的值发生变化时，组件都会被重新渲染一遍。<template> <comp v-if="update"></comp> &l
2021-08-20 11:22:15
302
原创 Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1首先在对话框 取消按钮 添加 click事件，例如：（ps：callOf 里面的addGroupData和ref - - ）<div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGroup')">取消</el-button></div>点击取消按钮，关闭对话框，清除表单验证callOf(formName){ this.creatGroup =
2021-08-18 17:11:07
2187
1
原创 Element UI el-table 表格多选的使用
开启多线功能新增一列，并将其 type 属性设置为 selection<el-table-column type="selection"></el-table-column>的select-on-indeterminate属性：【逻辑值】当有部分行被选中时，单机“全选”功能，此时对其他复选框的解决方法。<el-table :select-on-indeterminate = 'false'></el-table> // 全部不选中<el-t
2021-08-18 11:13:32
3877
原创 Vue.js中this.$nextTick()的使用
this.$nextTick()this.$nextTick()将回调延迟到下次DOM 更新循环之后执行。在修改数据之后立即使用它，然后等带DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。假设我们更改了某个DOM元素内部的文本，而这时我们想直接打印出这个被改变后的文本是需要DOM更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn,0)中；<template> <section> <
2021-08-18 10:36:24
295
原创 Vue中条件判断 v-if 、v-show
v-if中的keyVue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"></template><template v-else> <label>Email</label
2021-08-12 10:51:02
692
原创 Vue中watch监听数据变化以及watch中各属性详解
watch使用的几种方法通过watch监听data数据的变化,数据发生变化时,就会打印当前的值data(){ return { msg: '你在想屁吃!', info: '555...', }}watch: { msg(val, newval){ console.log(val) console.log(newval) }}通过watch 监听 docData 文本数据的变化, 数据发生变化时, this.change_number++ ( 使用深度监听 )
2021-08-10 18:02:06
561
原创 Vue中computed 计算机属性、getter、setter
计算属性在模板表达式中放入太多逻辑时，会让模板重且难以维护。比如：// 错误示例<div id="example"> {{ message.split('').reverse().join('') }}</div>应该声明一个计算属性，该计算属性不用挂载到Vue实例的data上，而是在Vue实例中的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数具体看https://cn.vuejs.org/
2021-08-09 18:11:29
787
原创 Vue中this.$router.replace和this.$router.push的区别
this.$router.push跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面。声明式：< router-link :to = “…” >编程式：< router.push(…) > // 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。// 字符串this.$router.push('/index') // 对象this.$router.push({path:'/index'})// 带查询参数，变成/backen
2021-08-09 10:51:13
35497
原创 Vue登录功能
登录概述1.登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后，根据后台的响应状态跳转到奥项目主页2.登录业务的相关技术点http 是无状态的通过 cookie 在客户端记录状态通过 session 在服务器端记录状态通过 token 方式维持状态在vue项目中运行在一个新的端口号，服务器与前端vue项目之间有跨域问题。如果前端和后台接口之间不存在跨域问题，推荐使用 cookie 和session 来记录登录状态。 如果存在跨域问题，使用 token 方
2021-05-24 19:55:58
864
原创 npm install -S -D -g的区别
npm install module_name -S 即 npm install module_name --save 写入dependencies 发布环境npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies 开发环境npm install module_name -g 全局安装(命令行使用)npm install module_name 本地安装(将安装包放在
2021-04-27 17:34:48
74
原创 Vue项目上线
项目上线相关配置通过 node 创建 web 服务器开启 gzip 文件传输压缩开启 https 传输协议，使得传输过程更加安全使用 pm2 管理网站上的所有引用通过 node 创建 web 服务器创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，托管为静态资源即可，关键代码如下：在根目录新建 vue_shop_server 文件夹在终端 npm init -y 初始化一个包管理配置文件npm i
2021-04-27 17:31:58
105
原创 Vue项目优化
生成打包报告打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：方式1：通过命令行参数的形式生成报告// 通过 vue-cli 的命令选项可以生成打包报告// --report 选项可以生成 report.html 以帮助分析包内容vue-cli-service build --report方式2：通过可视化的UI面板直接查看报告（推荐）在可视化的UI面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题通过 vue.config.js 修改 .
2021-04-26 18:42:29
96
原创 认识Node.js
Node.js目的就是帮助前端人员打开服务器黑盒子，类似的有：Java、PHP、Python、Ruby、.Net…Node.js不是语言、库、框架，是一个运行环境。可以解析和执行Js代码，可以脱离浏览器。浏览器中的JSECMAScript：基本语法、if、var、function、Object、ArrayBOMDOMNode.js中没有BOM、DOM不处理页面，主要有ECMAScript 和 在Node这个Javascr执行环境中为Javascript提供了一些服务器级别的操作 API ，例
2021-04-06 12:32:55
80
原创 jQuery
Javascript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 amimate、hide、show，比如获取元素等。一个JS文件，里面对我们原生js代码进行了封装，存放到里面。jQuery,就是为了快速方便操作DOM，里面基本都是函数（方法）。常见的Javascript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等页面DOM加载完毕再去执行 js
2021-04-06 10:58:32
135
2
原创 JS动画原理
动画事件原理：通过定时器 setInterval()不断移动盒子位置。动画盒子需要加定位 position：relative | absolute | fixed动画函数封装 animate缓动动画效果原理：使得元素运动有所变化。让盒子每次移动的距离慢慢变小，速度就会慢慢落下来核心算法：(目标值-现在的位置）/ 10 做为移动的距离步长停止条件：让当前盒子位置等于目标位置就停止定时器步长值需要取整Math.ceil | Math.floor<!DOCTYPE html>&l
2021-04-02 15:00:33
241
原创 mouseover和mouseenter的区别
mouseenter鼠标事件当鼠标移动到元素上时就会触发 mouseenter 事件类似mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发，mouseenter不会冒泡跟mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡...
2021-04-02 12:53:52
96
原创 网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数字都不带单位offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位的父级元素上方的偏移element.offsetLeft返回元素相对带有定位的父级元素左边框的偏移element
2021-04-02 12:39:39
156
原创 Flexible.js分析
(function flexible(window, document) { // 获取 html 根元素 var docEL = document.documentElement; // dep 物理像素比 var dpr = window.devicePixelRatio || 1 // adjust body font size 设置 body 的字体大小 function setBodyFontSize() { if (documen
2021-04-02 12:14:40
128
原创 window.location对象、window.navigator对象、window.history对象
location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为：protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/
2021-04-02 09:54:47
268
2
原创 Js执行机制——同步和异步
同步：单线程，同步任务都在主线程上执行。异步：多线程，异步任务是通过回调函数实现的，异步任务添加到任务队列中执行。异步任务一般有三类：普通事件 click、resize资源加载 load、error定时器 setInterval、setTimeoutjs执行机制：先执行主线程上的同步任务异步任务（回调函数）放入任务队列中一旦主线程同步任务执行完毕后，系统会按次序读取任务队列中的异步任务（回调函数），进入主线程执行栈，开始执行。由于主线程不断的重复获得任务，执行任务，再获取任务、再
2021-04-01 18:58:29
119
原创 this的指向问题
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
2021-04-01 18:45:50
101
原创 BOM——window对象
BOM 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是 W3C ，BOM 最初是 Netscape 浏览器标准的一部分。因为浏览器厂商太多，导致BOM 兼容性较差。DOM文档对象模型DOM 就是把文档当作一个对象看待DOM 的顶级对象是documentDOM 主要学习的是操作页面元素DOM 是W
2021-04-01 16:54:02
249
原创 JS事件高级
注册事件（绑定事件）注册事件两种方式：传统方式 、方法监听注册方式传统方式：利用on开头的事件 onclick<button onclick = ’ alert( ’ hi~ ’ ) </ button> '>btn.onclick = function ( ) { }特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式W3C标准 推荐方式addEventListener( ) .
2021-04-01 15:12:06
78
原创 DOM的重点核心
DOM文档对象模型，是W3C组织推荐的处理可扩展标记语言（HMTL或XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。对于JavaScript,为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。对于HMTL，DOM使得HTML形成一课DOM树，包含文档、元素、节点。我们获取到的DOM元素是一个对象（Object），所以称为文档对象模型。关于DOM操作，主要针对元素的操作。主要有创建、增、
2021-04-01 11:43:53
128
原创 三种动态创建元素区别
document.write()element.innerHTMLdocument.creatElement()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w.
2021-04-01 11:20:12
76
原创 操作自定义属性、H5自定义属性
获取属性element.属性 获取属性值。element.getAttribute(‘属性’)；区别：element.属性 获取内置属性值（元素本身自带的属性）element.getAttribute(‘属性’);主要获得自定义的属性（标准）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
2021-03-29 14:53:12
142
原创 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&
2021-03-29 14:23:36
60
原创 DOM获取元素、事件基础、操作元素、节点操作
什么是DOM?文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示。DOM把以上都看作是对象，对象有很对属性和方法。获取页面元素根据ID 标签名获取通
2021-03-29 14:13:20
259
原创 Web APIs
WeB APIs阶段与Javascript语法阶段（Js基础）的关联性js基础阶段：学习ECMAScript标准规定的基本语法Web APIs阶段web APIs 是W3C组织的标准web APIs 主要学习DOM 和BOMweb APIs 是Js独有的部分主要学习页面交互功能js基础学习 ECMAScript 基础语法为后面作铺垫，web APIs 是js的应用，大量使用Js基础语法做交互效果。什么是API？应用程序编程接口，是一些预先定义的函数，是给程序员提供的工具，使用时程序员直
2021-03-29 09:31:50
89
原创 JS中简单数据类型和复杂数据类型
简单数据类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型值类型：简单数据类型/基本数据类型，在储存变量中存储的是值本身，因此叫做值类型。string,number,boolean,undefined,null简单数据类型 null 返回的是一个空对象 objectvar timer = null;console.log（typeof timer); // object如果有个变量我们以后打算存储为对象，暂时没想好放什么？这个时候可以给 null引用类型：复杂数据类型，在存储时变量中
2021-03-29 09:14:17
171
原创 内置对象 API Math对象、Data对象、Array对象、String对象
Javascript分三种对象：自定义对象、内置对象、浏览器对象前两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的。内置对象： 就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）常用的Math对象Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员。Math.PI圆周率Math.floor()向下取整
2021-03-27 17:50:39
160
原创 变量、属性、函数、方法总结
// 变量、属性、函数、方法 // 变量、属性的相同，都是用来保存数据的 var num = 10; var obj = { age = 18 } // 变量 单独声明并赋值，使用直接写变量名， 单独存在 // 属性 在对象里面的不需要声明，使用时必须 对象.属性名 // 函数、方法的相同，都是实现某种功能 var objs ={
2021-03-25 13:07:23
102
原创 Javascript三种创建对象的方法，new关键字，for...in 遍历对象
在Javascript中，对象是一组无序的相关属性和方法的集合，例如：字符串、数值、数组、函数等。对象是有属性和方法组成属性：事物的特征方法：事物的行为字面量创建对象：{ } 里面包含了表达这个对象的属性和方法new object创建对象：利用构造函数创建对象// 利用对象字面量创建对象 {} var obj = { uname: '小明', age: 18, sayHi: function() {
2021-03-25 12:59:47
809
原创 Javascript预解析、代码执行
1、js引擎分为两部 ：预解析 代码执行预解析js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面代码执行 按照代码书写的顺序从上往下执行2、预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）变量提升 就是把所有的变量提升到当前的作用域最前面 不提升赋值操作函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数// 代码预解 代码执行 // 1 问 console.log(num
2021-03-25 11:55:30
102
原创 Javascript作用域
Javascript作用域：就是代码名字(变量)在某个范围内起作用和效果，目的是为了提高程序的可靠性和减少名命名冲突js的作用域(es6)之前：全局作用域、局部作用域全局作用域：整个script标签中，或单独的js文件 全局变量 浏览器关闭才能销毁，比较占内存局部作用域：在函数内部起作用和效果为局部作用域 局部变量 函数执行完毕销毁，比较节约内存es6 新增块级作用域 {}中就是块级作用域 if{} for{} java中var a = 1; function fn1
2021-03-25 11:45:47
56
原创 三次握手、四次挥手
三次握手：是指建立一个TCP连接时，客户端和服务器端的三次通信。第一次：客户端向服务器发送请求；第二次：服务器向客户端发送反馈，表示收到请求，并同时向客户端确认是否能够收到；第三次：客户端接受服务器反馈，并发送确认收到；–End结束四次挥手：是指TCP连接断开时，客户端和服务器端的四次通信。第一次：客户端向服务器端发送请求，表示断开连接，但是可以接受数据；第二次：服务器端接受客户端断开连接的请求，发送接受到请求，但还没有准备好；第三次：服务器端准备好断开连接后，发送客户端以准备好断开连接；
2021-03-23 17:52:18
48
原创 媒体查询Media Query
媒体查询（Media Query）是CSS3新语法。@media 可以针对不同的屏幕尺寸设置不同的样式。语法规范：@media mediatype and | not | only (media feature) { css-code };@media声明媒体查询mediatype媒体类型关键字 and | not | onlymedia feature 媒体特性必须有小括号包含media媒体类型：all 用于所有设备print用于打印机和打印预览scree用于电脑屏幕，平板电脑
2021-03-23 17:06:58
240
原创 rem适配布局
1、页面布局文字能否跟随屏幕大小变化而变化？2、流式布局和flex布局主要针于对宽度布局，那高度如何设置？3、怎样让屏幕发生变化的时候，元素高度和宽度等比例缩放？em相对于父元素 的字体大小来说的。比如：父元素 font-size:12px,子元素宽高10em,子元素宽高120px; 相乘rem（root em）是相对 html 元素 的字体大小来说的。比如：**根元素（html）设置font-size=12px;非根元素设置宽高 10rem，则换成 px，表示是 120px；相乘通过控制根
2021-03-23 16:36:14
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人