- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue配合element 实现在线预览pdf文档
使用插件npm install --save vue-pdf<template> <div id="app"> <el-button type="text" @click="dialogVisible = true" >点击打开 Dialog</el-button > <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
2022-03-31 10:27:49
3090
原创 CSS样式grid布局
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="
2021-11-26 19:41:47
218
原创 css预编译器—sass
一、注释sass中的注释有三种//是单行注释/**/多行注释/*!*/强注释强注释编译之后不会消失二、定义变量的方法以$开头定义名字:值；$my_color:red;调用是直接使用$名字* { margin: 0; padding: 0; background-color: $my_color;}三、混入sass代码块mixin//定义sass样式代码块@mixin my_colName($border,$bac) {...
2021-11-24 19:04:49
516
原创 微信小程序登录
通过给button设置open-type属性，值为getUserInfo，并绑定bindgetuserinfo事件就会触发后面的函数<button open-type="getUserInfo" bindgetuserinfo="getuser">点击授权</button>通过触发的函数的事件源拿到四个加密字符串使用wx.login()方法获取用户的code值wx.login({ timeout: 10000, success: (r.
2021-11-23 14:14:08
251
原创 javaScript惰性函数
惰性函数其实很简单就是js的一种使用的小技巧，他在自身函数内部更改了自身的代码，一般是配合自执行函数，处理浏览器兼容问题。 // 定义一个函数为一次性函数 var event = (function (dom, type = "click", fn = function () { }) { var dom = dom // 这里是否有传入dom，如果没有那么我们创建一个dom，以保证自执行的时候不会报错 if (!
2021-11-19 08:35:11
648
原创 TypeScript中的泛型 以及模块化
// 模块化导入到处// es6 export 以及 export default// export default 意思是导出全部不能再次到处// export 导出可以多次导出// export使用是import {} from 'url'// export default使用是import 命名 from 'url'// 命名空间// 命名空间主要的目的是将一个模块导出放置命名冲突export namespace uiltsName { export var obj = {.
2021-11-12 20:00:46
527
原创 typeScript断言 as
一、类型的断言as在一些时候ts无法获取具体的类型信息(HTMLElement),但是这些(HTMLImageElement)信息有又独特的属性和方法,此时就需要告诉ts当前的这个数据类型到底是那种（TS只允许类型断言转换为更具体或者不太具体(any/unKnown)的类型版本.这种情况会导致ts类型混乱）//断言1HTMLElement as HTMLImageElementlet test = document.getElementById("test") as HTMLImag...
2021-11-09 22:13:09
1576
原创 typeScript的类型系统基本使用
一、声明变量//第一步:声明变量并指定类型let age: number//第二步:给变量赋值age = 18//简化方式:声明变量的同时就赋值let age: number = 20//注意:声明变量的时候要指定变量的类型。二、类型注解1.代码中的: number就是类型注解。2.类型注解:是—种为变量添加类型约束的方式。三、数据类型Typescript 中的数据类型分为两大类:(1)原始类型(基本数据类型)常用的基本数据类型有5个:number st..
2021-11-09 22:12:53
484
原创 使用vscode中使用ts找不到名称 “console“。是否需要更改目标库? 请尝试将 `lib` 编译器选项更改为包含 “dom“。
在tsconfig.json中配置Just add the "lib": ["es2015", "es2017", "dom"] to your tsconfig.json and restart VS Code{ "compilerOptions": { "target": "es5", "lib": [ "dom", "es5", "es2015.promise" ,"es2015", "es2017"], }}
2021-11-09 20:50:20
4105
原创 typeScript起步篇
一、介绍1.ts是js的超集2.ts增加了类型系统3.ts是微软开发的开源编程语言，设计目标是开发大型应用可以在任何浏览器、任何计算机、任何操作系统上运行。二、TypeScript相比JS的优势优势—:类型化思维方式，使得开发更加严谨，提前发现错误，减少改Bug时间。优势二:类型系统提高了代码可读性，并使维护和重构代码更加容易。优势三:补充了接口、枚举等开发大型应用时S缺失的功能。vue 3源码使用TS重写，释放出重要信号:TS是趋势。Angular默认支持T5; React
2021-11-09 20:49:14
795
原创 Vue怎么渲染Markdown数据
插件网址链接vue-markdown - npm (npmjs.com)实现过程1.需要提前安装的npm包npm i vue-loader vue-template-compiler -D2.再安装vue-markdown插件npm install --save vue-markdown3.在需要用到的地方引入刚刚安装的插件import VueMarkdown from 'vue-markdown'export default { components: { Vu
2021-11-08 11:42:16
1435
原创 vue跨域解决办法，创建vue.config.js
module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { target: 'http://106.15.179.105:3000.
2021-10-28 21:15:08
141
原创 js浏览器数据库 IndexedDB && Web SQL
一、IndexedDB （建议使用）1.介绍：随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。2.IndexedD.
2021-10-24 20:31:26
2472
1
原创 vue2核心对象defineProperty
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象Object.defineProperty()的属性属性值Object.defineProperty 定义属性obj: 要增加或者修改属性的对象prop: 属性名1.descriptor: 属性描述符configurable: 布尔值 --> 是否可重新配置(删除) 默认为 false。enumerable: 布尔值 --> 是否可枚举 默认为 fal...
2021-10-12 21:39:49
575
原创 git提交出现Your branch and ‘origin/master‘ have diverged解决方法
取消修改，只要执行下面两步：git fetch origingit reset --hard origin/master当我们在本地提需要交到远程仓库的时候使用如下命令：1.git rebase origin/master然后使用2.git pull --rebase最后使用3.git push origin master把内容提交到远程仓库上。...
2021-10-08 21:29:56
10553
1
原创 前端面试题：当浏览器地址栏输入Url发生了什么？
浏览器的地址栏输入URL并按下回车。括号内的是考点，链接主要是后端小伙伴的事情，这边不需要着重说，要把首先浏览器查找当前URL是否存在缓存，并比较缓存是否过期，如果浏览器没有查找到缓存或者缓存已经过期，那么DNS将对url进行解析，解析成对应的ip地址，根据ip地址建立Tcp连接（三次握手）客户端向服务器发送http请求，一般请求为get 和 post （get post区别）服务器收到请求，最终返回给客户端响应体，响应成功状态码为200（常见的状态码），浏览器根据响应体生产内的html生成相应的dom
2021-10-08 21:05:30
886
原创 VUE自定义指令
Vue中除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一、指令分为全局指令和局部指令全局指令：// 注册一个全局自定义指令 `v-focus` //写入到main.js中Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el..
2021-10-07 20:50:31
113
原创 浏览器常见的http状态码
http状态码简单分类 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4** 客户端错误，请求包含语法错误或无法完成请求 5** 服务器错误，服务器在处理请求的过程中发生了错误 1开头的状态码 100 ...
2021-10-07 20:14:13
81
原创 JavaScript原生请求的介绍
代码以及三个方向1.readyState状态的含义2.跨域&&同源3.常见的状态码使用XMLHttpRequest进行请求// 首先创建一个XMLHttpRequest实例const xhr = new XMLHttpRequest()//post请求一定要添加请求头才行不然会报错xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// xhr上的open方法用来.
2021-10-05 19:32:21
1233
原创 JavaScript的ES6中async&&await的简单使用以及介绍
async&await是Promise和Generator的语法糖，使用他的目的就是用同步的写法，写异步的操作async 是“异步”的简写， async 用于申明一个异步的 functionawait 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。一、async1.async可以作用在任何方法前, 返回值是一个Promise对象 async function a(){ } console.l..
2021-10-04 16:39:58
1065
原创 JavaScript中操作数组的方法示例介绍
好多数组的操作方法发现有些都不记得了，这里总结了一些基本的操作方法，可能不是很多，大家可以在评论区补充，话不多说，上代码// 1. concat // 合并数组 // 需要合并的数组 // 合成之后的数组 // 原有数组没有被改变var concatArr1 = [1, 2, 3, 4]var concatArr2 = [5, 6, 7, 8]var concatArr3 = [9, 10]var concatAdd = concatArr1.concat(concatArr.
2021-10-03 17:12:00
637
原创 JavaScript的ES6中Promise的使用以及个人理解
好多小伙伴不理解Promise这个到底是干嘛的，怎么用？本篇就讲介绍下Promise内置类的使用以及作用。一、先来说说Promise是什么1.Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。2.从语法上说，promise是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。3.Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法二...
2021-10-02 18:05:18
380
2
原创 ES6箭头函数
接下来将以箭头函数中的this指向&&箭头函数与普通函数区别进行讲解一、箭头函数中的this先来说说js中的this指向吧，大家都知道js中的this默认是指向window的，只有问们作用域更改的使用或者调用的时候才会改变this的指向，就好比说在js中直接log this 那么拿到的就是window这个顶级对象，而在函数内部调用的时候就会指向调用的对象，而箭头函数就不太一样了，箭头函数指向的是他所在位置的父级作用域，不废话了上代码！！//箭头函数的常见的格式()=>{.
2021-09-30 22:58:24
135
原创 JavaScript原生继承 && ES6 class继承
本篇将详细讲解原型链继承、借助构造函数继承（call方法继承）、组合式继承、寄生组合继承、class类继承一、原型链继承原型链继承，就是给子类构造函数赋一个显示原型，利用原型链进行链式查找，再将子类显示原型的constructor指向子类的构造函数，这个是因为在之前更改了显示原型，为了保证原型链的完整性，再将constructor指回去，就是只能拿到父类的公有属性和方法，也就是原型链上的属性和方法。这个继承方式缺点就很明显了子类上可以更改父类的方法，就会导致父类的其他实例的方法和属性的改变，这就很.
2021-09-30 21:39:27
268
1
原创 js中的数据类型区别&&执行顺序
一、js数据类型分为两种 ‘基本数据类型’ 与 ‘引用数据类型’基本数据类型：number string boolean null undefined symbol bigInt引用数据类型：Array RegExp Object function data set map二、基本数据类型与引用数据类型的区别基本数据类型存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储...
2021-09-29 12:03:43
85
原创 解析ES6内 var let const
# 递归深拷贝对象```javascript<script> var obj = { // 定义要进行深复制的对象 name: "张三", age: 14, tel: 110, info: { isSingle: true } } // 定义深复制的函数 function de...
2021-09-28 16:28:17
281
原创 git仓库切换账号，失败提示403错误
办法一（修改全局配置）： 修改全局配置name：git config --glnobal user.name "nameVal" 修改全局配置eamil：git config --global user.email "[email protected]"方法二（进行本地修改用户名和密码）方法二（只是修改了全局配置，如果曾经提交过代码，已经在命令行或者提示 窗口进行登录过，这样只修改全局配置往往是不行的，这个时候就需要进行修改配置的用户名和密码了）打开cmd或者其他的命令行窗口输入：run...
2021-09-12 18:43:14
617
原创 ES6结构赋值
// 解构赋值 // 1.数组 var a, b, c [a, b, c] = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a, b, c);// 1 , 2 , 3 [d, e, ...f] = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(d, e, f); // 1 2 3-9 // 函数返回数组结构
2021-09-06 17:29:18
86
原创 vue3使用js封装全局loading
第一步在components文件夹中新建myLoad.vue组件<template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div></template><script>export default { props: { msg: Object,
2021-06-01 20:47:16
609
2
原创 vue3.0使用vant组件的过程
创建项目vue create yxsc_project安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)第二部vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i
2021-05-31 11:19:07
631
原创 在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分，仅供参考 欢迎提出意见
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const path = require('path')// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -Dconst CompressionWebpackPlugin = require('compression-webpack-plugin')function resolve(dir) { return path.join
2021-05-28 19:54:05
74
原创 JavaScript递归深复制对象
递归深复制对象<script> var obj = { // 定义要进行深复制的对象 name: "张三", age: 14, tel: 110, info: { isSingle: true } } // 定义深复制的函数 function deepClone(params) {
2021-05-28 18:40:23
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人