- 博客(90)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue 实现后台权限管理
1.权限管理思路 （权限(被分配)——》角色(被分配）---------》用户） 框架采用vue-element-admin2，我设计是角色中直接配置权限，看界面 角色列表点击列表中 权限设置 打开的界面权限设置中的树形菜单结构 id是唯一的。对应动态路由中meta:{permission: "对应树形菜单中唯一的id"}, 便于后期比对显示动态路由{"data":[{"...
2020-11-29 13:22:05
1331
转载 CSS实现单行、多行文本溢出显示省略号（…）
CSS实现单行、多行文本溢出显示省略号（…）如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：d..
2020-10-10 10:54:24
203
原创 vue跳转 路由和参数都变化，但是页面没有更新
1问题描述页面 A->B 从浏览器回退到 A ,然后 A->C ,然而C 的页面内容是B的，C页面的 路由地址和参数都是对的。2.解决方法，我是重新刷新一下，但是这个不好有刷新的痕迹。1）用watch监控 $route 监控不到 ,都是空的watch:{ $route(to, from) { console.log("----------"); console.log(to); console.log(from);
2020-09-15 15:45:33
3604
原创 vue 3.0 创建项目
1.安装node我的node 版本10.15.3 和 12.18.0 安装都成功了，用这个node版本安装出来的vue 版本对应是 4.4.6 和4.5.3，目前是这样 不知会不会版本变化。2.安装淘宝镜像（如果你的网络很好 这一步可以不装）npm install -g cnpm --registry=https://registry.npm.taobao.org3.全局安装脚手架npm install -g @vue/cli //如果网络不好 用cnpm,前提装了第二步...
2020-08-15 17:49:49
2283
原创 vue 文件加载项目中图片文件方式
1.图片和文件在相同目录中 1）加载 bj.png <img:src="require('./bj.png')"> <imgsrc="./bj.png">2) 加载 assets中的图片 直接用相对目录<imgsrc="../../assets/images/***.png"alt/>
2020-08-05 14:28:29
978
原创 vscode常用插件安装和标签自动补全设置
1.vscode 常用插件Auto Close Tag 自动闭合标签 在输入<div> 回车才会自动闭合 而且提示工具前面是abc 显然不好用。chinese (Simplified) Language 下载完 vscode 以后 一般先安装这个，重启可以变成中文，英文好的就可以不用安装。vue vue语言，在vscode 右下角设置，不安装没有这个选项，所以代码不会变颜色，难看。Vetur: 格式化代码，风格很多种，我选择的这个。HTML Snippets:补全 ht.
2020-07-28 13:53:43
22804
原创 vue 自定义事件 兄弟组件间通信
首先 vue 实例有event对象 可以实现自定义事件，实现兄弟组件间通信。项目结构：event.js 导出vue实例对象 Input.vue 和 list.vue 是兄弟组件 ，index.vue 引入 两个子组件，实现 Input 和list 间通信看event.jsimport vue from 'Vue'export default new vue()Input.vue<template> <div class="inputcontetn">.
2020-06-14 21:17:31
764
原创 vue 父子组件生命周期调用
遵循 牵头是父 结尾是父 中间是子。看代码1.父组件内容<template> <div> 我是商品（父组件） <input type="text" v-model="name" style="background-color:red"> <router-view></router-view> </div></template><script>import s.
2020-06-10 21:18:38
282
原创 mvvm框架
1 mvvmObject.defineProperty():方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。M:model v:view vm:view-model2.mvc view 依赖model 可以有后端代码3.设计模式...
2020-06-02 23:50:19
164
原创 js 错误监控
1.错误的分类即时运行错误：代码错误 (1) try...catch (2) window.onerror /addEventLister资源加载错误（不会冒泡但是可以捕获） （1） object.onerror(写在标签上) （2）performance.getEntries();可以拿到所有正常加载的资源 是一个数组。 （3）Error事件捕获<!DOCTYPE html><html lang="en"&g...
2020-06-02 22:11:18
247
原创 js页面性能
1.资源压缩合并，减少http请求2.非核心代码异步加载-异步加载的方式-异步加载的区别异步加载的方式 （1）动态脚本加载 （2） defer (3) async异步加载的区别 (1) defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次执行 (2)async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关3.利用浏览器缓存-缓存的分类-缓存的原理 缓存的分类 ： （1）强缓存...
2020-06-02 21:38:44
153
转载 less和sass
less与sass的区别在介绍less和sass的区别之前，我们先来了解一下他们的定义：一、Less、Sass/Scss是什么?1、Less：是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。2、Sass：是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套...
2020-06-02 17:05:02
5123
转载 浏览器兼容性问题
1，浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：可以使用Normalize来清除默认样式，具体可参考文章：来，让我们谈一谈 Normalize.css也可以使用如下代码：body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }2，浏览器兼容问题.
2020-06-02 17:00:21
162
转载 浏览器内核
在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。1、IE浏览器内核：Trident内核，也是俗称的IE内核；2、Chrome浏览器内核：统称为Chromium内核或Chrome内核...
2020-06-02 16:55:27
245
转载 W3C标准理解
概念：W3C标准中文名：万维网联盟，外文名：World Wide Web Consortium万维网联盟标准不是某一个标准，而是一些列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。对应的标准也有三方面：结构化标准主要包括XHTML和XML，表现标准语言主要包括CSS、行为标准主要包括（如W3C DOM）、ECMAScript等。这些标准大部分是W3C起草发布，也有一是其他标准组织制定的标准，比如E...
2020-06-02 15:33:49
281
转载 js 排序算法
0、算法概述0.1 算法分类十种常见排序算法可以分为两大类：比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。0.2 算法复杂度0.3 相关概念稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。 不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 .
2020-05-26 21:19:57
378
原创 js 通信知识点总结
1 同源策略浏览器限制不同源不能通信，源包括（协议：域名：端口）。非同源时Cookie LocalStorage和IndexDB不能读取 DOM无法获取 AJAX不能请求2前后端怎么通信AJAX (同源) WebSocket(不限制同源非同源) CORS(支持同源和非同源)3 创建ajaxXMLHttpRequest对象的工作流程 兼容性处理 事件的触发条件 事件的触发顺序function ajax1(url, type) { const p = new Pro
2020-05-24 23:01:08
302
原创 js面向对象
<html><head> <title>面向对象</title> <meta charset="utf-8"> <style> </style></head><body></body></html><script src="../js/jquery.min.js"></script><scr.
2020-05-24 21:37:11
207
原创 js 数据类型
1.7种数据类型原始类型：Boolean Null Undefined Number String Symbol对象：Object2.显式类型转换Number对象类型装换先调用自身的valueOf方法，如果改方法返回原始类型的值（数值、字符串和布尔值），则直接对该值使用Number方法，不再进行后续步骤。如果valueOf方法返回复合数据类型的值，则对该值使用Number方法，不再进行后续步骤。如果toString返回的是复合数据类型，则报错。String对象类型装换
2020-05-13 19:02:57
106
原创 http讲解
1.http协议类http协议的主要特点 http报文的组成部分 http方法 post和get的区别 http状态码 什么是持久连接 什么是管线化http协议的主要特点简单快速 灵活 无连接 无状态http报文的组成形式请求报文案例：请求行：有地址 http 版本号请求体：key/value 组成get请求 相似 只是 参数在url 后边get请求案例：响应报文案例：http方法GET --获取资源 POST-- 传输资源..
2020-05-11 14:03:46
195
原创 css上下两栏布局（上栏固定 下栏自适应）
1.效果图<html><head> <title>上下两栏布局（上部固定，下栏自适应）</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ...
2020-05-07 15:03:28
1587
转载 CSS实现三栏布局(5种)
常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局那么我们就是用以上5种方式完成三栏布局，不过前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px)，中间宽度自适应1、float布局: float最初的设计的初衷是为了解决文字环绕的问题，即给一个图片设置float属性之后会使文字环绕在图片...
2020-05-07 14:47:43
188
原创 网页三栏布局五种实现方式（左中右）
适用：高度固定 左右宽度固定 中间自适应<html><head> <title>三栏布局</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ...
2020-05-07 14:46:26
2941
转载 JsRender 前端渲染模板基础学习
JsRender前端渲染模板使用模板，可以预先自定义一些固定格式的HTML标签，在需要显示数据时，再传入真实数据组装并展示在Web页中；避免了在JS中通过“+”等手动分割、连接字符串的复杂过程；针对高性能和纯字符串渲染进行了优化；无需依赖DOM和jQuery；优先使用场景：元素重复出现；动态加载数据，并前端显示；JsRender使用引入js 定义模板 准备好要显示的数据 jso...
2020-05-01 21:29:48
793
转载 jQuery-tmpl基于jQuery简单实用的模板引擎
jQuery-tmpl是一个简单的模板引擎，能够实现动态的修改DOM数据，使用简单易懂的语法结构，通过JSON的格式传递和绑定数据，这个也是jQuery官方团队维护的模板引擎，很不幸的是这个项目将不在提供维护更新，将由JsRender替代。如果你还是喜欢使用jQuery-tmpl，这篇文章将为你详细的介绍如何使用jQuery-tmpl。前言动态请求数据来更新页面是现在非常常用的方法，比...
2020-05-01 21:18:28
188
转载 手机浏览器适配web
转载：https://www.jianshu.com/p/2c33921d5a68另一篇文章：https://www.jianshu.com/p/cf600c2930cb
2020-04-30 17:45:14
658
转载 Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错
.vue
2020-04-17 17:17:55
130
1
原创 vue 基础知识点
1.指令v-html:会覆盖内部内容 会有xss攻击 不要用在用户提交的时候<p v-html="inHtml"><span>aaaa</span></p> //<span>aaaa</span>被覆盖掉v-if v-else :进行逻辑判断 用户不频繁更改v-show :渲染成 display:none...
2020-04-15 11:50:13
97
原创 js题目
1.let var constlet const 是块级作用域 var变量提升 const 常量 不能改变 var 是es5console.log(b) //undefinedvar b=400; //变量提升console.log(a) //报错 a is not definedlet a=12.强制类型转换和隐式类型转换强制：parseInt......
2020-04-06 20:56:45
119
原创 如何预防 xss,xsrf攻击
1.xss攻击情景：浏览网页 恶意脚本执行 获取cookie信息 获取信息处理：< 用 <> 用> 替换2.xsrf 攻击情景： <img src='/重要信息'>处理： 使用post 接口 加验证信息...
2020-04-06 16:01:42
160
原创 js 性能优化 节流 防抖
1.防抖使用场景1.监听一个输入框文字变化后触发chang事件2.直接用keyup事件则会频繁触发change事件3.防抖：用户输入结束或者暂停后才会触发change事件<!DOCTYPE html><head> <meta charset="utf-8"> <title> ...
2020-04-06 13:28:26
176
原创 手机上调试H5页面
1.在h5页面中引入js文件<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>2.在全局中或者打印的地方写var vConsole = new VConsole();3.打印要调试的内容console.log(res)4.手机浏览 右下角会有绿色...
2020-03-30 16:38:55
2795
原创 webpack配置
1.新建文件夹 webpack-demovscode 打开文件 -》打开控制台（只要进入文件目录中）2.初始化webpackwebpack init -y //生成package.json3.安装webpacknpm install webpack webpack-cli -D --registry=https://registry.npm.taobao.org会生成...
2020-03-29 23:26:08
140
原创 html性能优化
1.加载更快压缩代码 合并代码 SSR服务器端渲染 缓存2.渲染更快css写在head中 js 写在body 最下边使用懒加载（图片懒加载 上滑在家更多）对DOM进行缓存不要频繁操作DOM 合并到一起插入DOM节流throttle 防抖 debounce...
2020-03-29 20:49:59
273
原创 window.addEventListener()和document.addEventListener()区别
window.addEventListener('load',function(){//页面的全部资源加载完后才会执行 包括 图片 视频等})window.addEventListener('DOMContentLoaded',function(){//Dom 渲染完即可执行 此时图片视频还可能没加载完})...
2020-03-29 20:44:55
6967
原创 从输入url到渲染出页面的整个过程
1.加载资源形式1）html 代码2）媒体文件 图片 视频3）js css2.加载资源的过程1）DNS 解析 域名-》IP2) 浏览器根据IP地址向服务器发起http请求（可能https）3)服务器处理http/https 请求并返回给浏览器3.渲染页面的过程1）根据html代码生成DomTree2)根据css生成cssom3)整合行程RenderTre...
2020-03-29 20:36:59
393
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人