- 博客(65)
- 收藏
- 关注
RSS订阅原创 HTML标签类型和h5新特性
doctype是html5标准网页声明，是来告知web浏览器的解析器解析文档所需的文档标准，不同的解析模式会影响浏览器对于CSS代码甚至JavaScript脚本的解析。是所有头部元素的容器，绝大多是头部标签的内容都不会显示给读者。可加入的标签有title、base、link、meta、script 以及 style。用于定义文档的主体,包含了文档的所有内容，该标签支持html全局属性和时间属性。
2022-09-02 17:06:34
184
原创 常用git指令
配置git config --list 显示当前的Git配置 git config -e --global 编辑Git配置⽂件 git config --global user.name "lhy" 设置提交代码时的⽤户信息 git config --global user.email "1562732132@qq.com" 设置提交代码时的⽤户信息 config --globaluser.editor "lhy" 设置提交代码时的⽤户信息新建仓库gi.........
2021-08-05 01:01:20
118
原创 2021-03-09
1.重绘和重排重绘:只一个元素外观的改变所触发的浏览器，行为浏览器会根据元素的新属性重新绘制，是元素呈现新的外观。重排:当渲染书中的一部分，因为元素的规模，尺寸布局隐藏的改变而需要重新构建，这称之为重排。每个页面至少有一次重拍，就是在页面第1次加载的时候。区别:重排一定会导致重绘，但重绘不一定会引发重排。如何避免:避免频繁操作dom， 设置与元素display:none，然后进行页面布局，等操作设置完成后将元素设置为display: block，这样的话就只会引发两次重绘和重排。直接改变元素的cla
2021-03-09 00:13:12
115
原创 算数运算符(基本/赋值/关系/逻辑)
1.基本运算符+ - * / % ++ --var a = 30,b = 20console.log(a+b); //50console.log(a-b); //10console.log(a*b); //600console.log(a/b); //1.5console.log(a%b); //10//自增var a = 10var b = a++console.log(a,b); // 11 10var c = ++aconsole.log(a,b,
2021-02-25 15:49:49
641
原创 ElementUI使用本地CDN时文件图标字体无法正常显示的解决方法
问题描述官方CDN：引入并使用图标字体无异常<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script>将以上js和css地址复制到浏览器地址栏，下载到本地并使用，图标字体丢失<link href="./stati..
2021-02-24 16:33:48
1731
原创 随机验证码
使用插件:(gverify.js）下载：gverify.js!(function(window, document) { function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 this.options = { //默认options参数值 id: "", //容器Id canvasId: "verifyCanvas", //canvas的ID width: "100", //默认canvas宽度 height.
2021-02-23 14:30:28
218
2
原创 常见解决跨域问题的方案
利用axios想后端请求数据，可能会发生跨域请求，发生跨域的原因可能有域名不同端口不同协议不同解决方案有两种：前端设置代理（vue.config.js）let path = require("path")// 大部分在这里配置webpack的相关的代码// webpack是基于node 不能使用import processmodule.exports = { ...
2021-01-29 18:02:51
119
原创 vue大图预览方法
1.使用vue-directive-image-previewer插件安装npm install vue-directive-image-previewer -D引入main.jsimport VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-image-previewer/dist/assets/style.css'Vue.use(VueDirectiveImage
2021-01-28 19:01:55
986
原创 vue中“\n“的解析展示与传输问题
后端获取到的字符串带"\n"返回示例:"this.ruleForm.position : 【与必游景点的距离】\n• 天安门： 约15.7公里\n• 圆明园： 约12.9公里\n• 八达岭长城： 约52.4公里\n【与附近其他景点的距离】\n• 石景山游乐园： 约343米"1.首先需要将"\n“替换成”<br>":this.ruleForm.position = this.ruleForm.position.replace(/\\n/g, "<br>")2.用v-html..
2021-01-06 17:43:53
1911
原创 webpack配置浏览器厂商前缀
安装webpack打包时，自动配置浏览器前缀，需要用到一个loader(postcss.loader)和一个插件(autoprefixer),所以首先需要安装好插件和loader。npm install postcss-loader -Dnpm install autoprefixer@version -Dversion为相应的版本号，部分较高版本不起效，亲测7.2.6和7.2.1版本有效,所以建议安装时指定版本号。配置安装完成后，在webpack.config.js的同级目录下新建postc
2020-12-09 17:27:02
273
原创 Ubuntu+nginx 部署vue项目
安装nginxapt-get purge nginx nginx-common进入nginx配置文件，配置nginxcd etc/nginx/sites-enabledsudo vim default进入default，点击i打开编辑模式，主要配置端口，文件位置和接口地址，如下图：*所配端口必须保证是放行状态netstat -aptn 查看所有放行的端口号sudo ufw enable allow 8888 放行指定的端口号*配置项目路径root后面为vue项目在..
2020-12-02 18:57:57
994
原创 复制内容到剪切板的两种方式
1.纯js实现复制到剪切板 <div style="padding:20px"> <el-input v-model="copyValue" id="copyText" style="width:400px;"></el-input> <el-button type="primary" @click="handleClipboard1()">copy</el-button> <p class="title">.
2020-11-13 19:03:42
1522
原创 vue+elementUI实现table-item的上下移动
需求描述：默认显示编辑按钮，删除和上下移动按钮置灰并禁用；点击编辑之后，编辑按钮隐藏，展示添加和保存按钮，第一项的上移按钮和最后一项的下移按钮保持不变，其他操作按钮高亮，变为可操作；此类标签添加不可超过10个。<template> <div class="main-content"> <!-- 操作按钮 --> <div class="marginTB10 fr"> <div v-if="!isEdit"> ..
2020-11-12 18:19:55
823
原创 HTTP请求报文与响应报文和常见状态码
HTTP请求报文与响应报文格式请求报文包含三部分：a、请求行：包含请求方法、URI、HTTP版本信息b、请求首部字段c、请求内容实体响应报文包含三部分：a、状态行：包含HTTP版本、状态码、状态码的原因短语b、响应首部字段c、响应内容实体常用状态码1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。100 (继续) 请求者应当继续提出请求。 服务器返回此代...
2020-09-29 00:44:12
546
原创 vuex(状态管理模式)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。安装npm install vuex --save使用初始化store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ //创建VueX对象 state:{ name:'wangcai' //以键值对的形式存放需要进行管理的状态
2020-09-29 00:34:21
165
原创 npm install报错(npm ERR! Unexpected end of JSON input while parsing near )-解决方案
执行npm install的时候报错npm ERR! Unexpected end of JSON input while parsing near '...sh_time":141072930277'直接执行 npm cache clean --force, 如果执行成功，再npm install即可。如果执行失败，请先升级npm，即npm i -g npm, 最后再执行npm cac...
2020-09-28 18:12:57
261
原创 javaScript常见正则表达式
是否带小数function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } 是否中文名称组成function ischina(str) { var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/ return reg.test(str); /*进行验证*/}是否全由八位数.
2020-09-28 18:10:28
131
原创 vue的生命周期和路由的生命周期
vue的生命周期beforeCreate：此时该实例内的所有东西都还没有创建，所以在这个生命周期钩子函数中事件,data都是undefined。created：在这个生命周期之间，进行初始化事件，进行数据的观测，在created的时候数据已经和data属性进行绑定，但未开始编译模板。beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。mounted：已经将编译好的模板，挂载到了页面指定的容器中显示。beforeUpdata：状态更新之前执行此函数， 此时 data 中的状态值
2020-09-28 17:35:50
868
原创 路由传参的三种方式（query/params）
路由带参数：问号的形式传参（id）<router-link to "/user/detail?id=1"> 用户1</router-link><router-link to "/user/detail?id=2"> 用户2</router-link><router-link to "/user/detail?id=3"> 用户...
2020-09-28 16:47:01
44416
2
原创 初识函数
1.函数定义函数声明：使用function关键字，基本格式如：function 函数名(参数1,参数2,参数3,参数4){//函数内容} function hello(){ alert("hello"); } hello();函数定义完之后，并不会自动执行，需要调用hello();才可以执行函数中的代码函数表达式将function整体，放在赋值运算符的右...
2020-09-28 14:43:23
85
原创 浏览器的渲染机制和页面渲染流程
1，从输入一个网址到浏览器显示页面经历的过程a,DNS解析，找到对应网址的IP地址b,根据IP地址，找到对应的服务器c,建立TCP连接（三次握手）d,连接建立完后，发出HTTP请求e,服务器根据请求作出HTTP响应f,浏览器得到响应内容，进行解析与渲染，并显示出来g,断开连接(四次挥手)这个过程叫一次HTTP事务。2，浏览器的渲染机制浏览器开一个选项卡，就是一个进程，操作系统...
2020-09-28 11:48:25
431
原创 javaScript中的深浅拷贝
浅拷贝/克隆只是对指针进行拷贝，拷贝前后的指针依旧指向同一个内存空间；深拷贝/克隆不仅会对指针进行拷贝，还会对指针所指向的空间内容进行拷贝。let obj1 = {a:100,b:[1,2,3,],c:{x:10},d:new RegExp()}console.log(obj1); //{ a: 100, b: [ 1, 2, 3 ], c: { x: 10 }, d: /(?:)/ }????浅拷贝的实现方法1：let obj2 = {...obj1}console.log(obj1
2020-09-14 14:51:30
81
原创 CSS实现两边固定中间自适应的方法
效果如下利用flex布局 <div class="box"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> .box{ display: flex; justi
2020-09-04 17:09:13
428
原创 CSS实现盒子水平垂直居中的方法
<div class="outside"> <div class="inside"></div> </div>利用定位，考虑盒子的宽高 .outside { width: 800px; height: 600px; border: 1px solid red; margin: 100px auto; .
2020-09-03 12:01:16
90
原创 HTML输入属性的约束（input）
一.disabled：输入的元素不可用，默认为可用可以输入:<input type="text"><br> 不可输入:<input disabled=true type="text">二.max/min：输入元素的最大值 / 输入元素的最小值 <form action="demo_form.php" method="post"> <br><input type="number" min="1" max="5">
2020-07-22 15:47:46
864
原创 爱心飘落效果实现
<style> html, body { margin: 0; background-image: url("./images/1.jpg"); overflow: hidden; } .snowfall-flakes { margin: 20px auto; /* background-col.
2020-07-21 14:46:05
549
原创 CSS实现吃豆豆效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>吃.
2020-07-17 17:17:26
489
原创 JavaScript 严格模式(use strict)的好处和限制
use strict:指令在ES5中新增的,目的是指定代码在严格条件下执行。使用严格模式的好处：消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫。严格模式下的限制不允许使用未声明的变量：不允许删除变量或对象。不允许删除函数。不允许变量重名:不允许使用八进制:不允许使用转义字符:不允许对只读属性赋值:不允许对一个使用getter方法读取的属性进行赋值不允许删除一个不允许删除的属性：变量名不能使用 “e
2020-07-15 13:37:39
776
翻译 javaScript错误和异常处理
try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。throw 语句允许我们创建自定义错误。<body> <p>不管输入是否正确，输入框都会再输入后清空。</p> <p>请输入 5 ~ 10 之间的数字：</p> <input id="demo.
2020-07-15 11:39:47
128
原创 javaScript Switch语句和break/continue
switchvar bmConfig = {}var enviroment = 'dev';switch (enviroment) { case 'dev': bmConfig = { authorUrl: "url1", } break; case 'prev': bmConfig = { authorUrl: 'url2', } break
2020-07-14 17:03:54
710
原创 javaScript中的循环遍历方法
先定义下面示例中要用到的对象和数组： const obj = {a:1,b:2,c:3} const arr1 = ["apple", "orange", "banana", "strawberry"] const arr2 = [1, 2, 3, 4]forforEnchfor infor offor in 和 for of 的区别：for in是遍历key，for of是遍历value。for in是简单遍历，for of可以遍历iterator对象。
2020-07-14 16:21:13
134
原创 字符串的基本属性和方法
转义字符 document.getElementsByTagName("P")[0].innerHTML = "my name is \'Stephen Curry\'" document.getElementsByTagName("P")[1].innerHTML = "my name is \"Stephen Curry\"" document.getElementsByTagName("P")[2].innerText = "my name is \n Stephen Curry" d
2020-07-13 17:03:25
200
原创 进程线程和变量相关的概念
JS写法：行内（内联）；内部 ；外部进程：当一个项目运行起来后，就是一个进程 ，进程是操作系统分配和调试资源（CPU和内存）的基本单位。线程：真正干活是线程 ，Js是单线程，默认情况下，工人从上向下干活（执行任务）JS是单线程的，是指它的主线程是单线程。如果主线程遇到一个非常耗时的任务，它就找别的线程来帮忙。别的线程把活干完后，需要把结果给主线程。非常耗时的任务：eg：网络请求数据 读...............
2020-07-13 11:24:18
202
原创 js文档对象模型(Document Object Model)
一、JavaScript HTML DOMHTML DOM (文档对象模型)：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。1. HTML DOM 模型被构造为对象的树：2.查找HTML元素：通过 id 查找HTML 元素document.getElementById("main");通过标签名查找 HTML 元素document.getElementsByTagName("p");通过类名查找HTML 元素document
2020-07-13 10:31:24
546
原创 js浏览器对象模型（Brower Object Model）
一、认识BOMBOM：浏览器对象模型， Brower Object Model。javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]二、window对象只要打开浏览器，就可以看到当前的窗口，当前窗口就是Window对象，而window
2020-07-09 11:53:27
192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人