- 博客(19)
- 收藏
- 关注
原创 苹果刘海全面屏底部留白问题解决(viewport-fit=cover)
在meta标签设置viewport-fit=cover,页面就会填充整个刘海区域(前提是浏览器或套页面的app必须做了iphonex的兼容)。<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">如果上面属性设置之后,再把html,boby高度设置成100% 发现底部出现空白没有填满,这主要是这里的100%,只是安全区域的高度,是不包含非安全区域的。要使页面元
2021-10-15 17:57:05
7627
原创 VSCode自动编译TS文件
1.生成配置文件tsconfig.json在项目文件夹目录打开终端 输入: tsc --init2.修改tsconfig.json文件注:ts中的严格模式 参考:掘金3.启动监听任务在VSCode中选择:终端 --> 运行任务 --> 显示所有任务 --> 监听tsconfig.json...
2021-10-12 15:08:12
520
原创 git工作流程
一、新建任务分支1,从已有的分支创建新的分支(如从master分支),创建一个dev分支 git checkout -b dev2,创建完可以查看一下,分支已经切换到dev git branch3,提交该分支到远程仓库 git push origin dev二、拉取分支1、把远程分支拉到本地 git fetch origin dev(dev为远程仓库的分支名)2、在本地创建分支dev并切换到该分支 git checkout -b dev(本地分支名称) origin/
2021-09-28 20:34:25
178
原创 less与cass使用小教程
less安装依赖 npm i less less-loader 1:定义变量 @width:50px; .box{ @height:30px; width:@width; }2:嵌套 .box{ .box-son{ } } 3:&:父级 .box{ &:hover{ //...
2021-08-04 21:34:42
444
原创 好用的前端网站
图片压缩工具:https://tinypng.com/F2 移动端可视化方案:https://f2.antv.vision/zh阿里巴巴矢量图标库:https://www.iconfont.cn/一个基于 JavaScript 的开源可视化图表库echarts:https://echarts.apache.org/zh/index.htmlvscode插件推荐网址:https://blog.youkuaiyun.com/learner198461/article/details/54580363 ...
2021-08-01 19:48:51
79
原创 VUE-PC端开发
Element-UI使用1.下载npm i element-ui -S2.使用(在main.js中)import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h =&
2021-07-24 16:14:16
1715
原创 vue注册全局组件小妙招之自动注册
引言:当我们开发一个很大的项目的时候,往往需要封装很多全局组件来复用,这时如果我们一个个的在main.js通过(import xxx from './xx')导入再Vue.component(‘组件名’,xxx)去完成全局注册就非常麻烦。这时我们可以通过Vue.use()的方法,以对象的方式传入触发install方法,利用require.context()方法获取全部需要全局注册的组件,最后通过遍历组件数组的形式进行Vue.component()实现自动全局注册组件。具体实现方法如下:1.在SR
2021-07-09 18:19:09
648
原创 简单了解SPA; SEO方式;网页渲染方式
SPA:全称:Single Page Application (单页面应用)概念: 网站的效果都是显示在一个静态页面中的 在页面切换时,其实并没有从一个页面中跳转到另一个页面中,只是通过 js 动态的将内容进行了修改 在网站的源代码中是看不到任何数据(关键字)的 特点: 优点: 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染; 基于上面一点,SPA 相对对服务器压力小; 前后端职责分离,架构清晰
2021-07-09 12:27:26
792
原创 秒懂Vue双向绑定的原理
基本概念: 当视图上的数据发生改变时, data 中的数据也发生改变 当 data 中的数据发生改变时,视图中的数据也发生改变 原理: 主流使用的版本 2.x: 关键字:Object.defineProperty var data = {}document.querySelector('#ipt').oninput = function(e) { data.name = e.target.value}Object.defineProperty(dat...
2021-07-09 12:17:23
122
原创 轻松了解MVVM与MVC
项目开发思想 MVC: MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式。这种模式用于应用程 序的分层开发。Model(模型)- 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑,在数据变化时更新控制器。 View(视图)- 视图代表模型包含的数据的可视化。 Controller(控制器)- 控制器作用于模型和视图上。它控制数据流向模型对象,并在数据变化时更新视图。它使视图与模型分离...
2021-07-09 12:09:42
154
原创 VUE项目利用vue-print-nb插件进行页面打印
首先,打印功能我们借助一个比较流行的插件:vue-print-nb它的用法是:安装$ npm i vue-print-nb首先注册该插件import Print from 'vue-print-nb' Vue.use(Print);// 内部就是定义了一个自定义指令 v-print="{id:需要打印dom的id}",而且不需要再写点击事件使用v-print指令的方式进行打印template> <div> <...
2021-07-06 16:09:05
946
1
原创 qrcodejs2页面转为二维码;qrcodejs2使用教程
使用第三方包将当前路径转为二维码 包名:qrcodejs2传送门 使用步骤: 下载第三方包:npm install qrcodejs2 --save 导入第三方包:import QRCode from 'qrcodejs2' 调用: 添加结构: <div id="qrcode" ref="qrcode"></div> 调用方法: getQRcode()
2021-07-06 15:38:28
571
1
原创 html2canvas页面截图工具;实现页面截图;使用第三方包将页面截图方法
使用第三方包将当前页面进行截图: 包名: html2canvas 传送门 使用步骤: 下载第三方包: npm install --save html2canvas 导入第三方包: import html2canvas from "html2canvas" 调用方法: html2canvas(this.$refs.要截图的区域, { useCORS: true }).then(canvas =&g..
2021-07-06 15:23:11
229
原创 webpack打包工具使用教程(简单易懂)
目录webpack 基本概念 - 三个问题webpack 基本概念 - 准备工作webpack 基本概念 - 概念webpack 的使用 - 步骤webpack 的使用 - npm runwebpack 的使用 - 使用配置文件配置项 - 入口配置项 - 出口配置项 - 项目的模式配置项 - 解析配置项 - 源码映射loader - 作用loader - style-loader&css-loaderloader - less-loader
2021-07-06 15:15:35
1167
原创 了解DOM文档对象模型;浏览器与新技术;解决跨域;同源策略
DOM的事件模型是什么?DOM的事件模型(注册事件的方式)分为: 脚本模型 内联模型(同类一个,后者覆盖前者) 动态绑定(同类可多个) 脚本模型<!-- 脚本模型:⾏内绑定 --> <button onclick="javascrpt:alert('Hello')">Hello1</button>内联模型<!-- 内联模型:同⼀个元素的同类事件只能添加⼀个,如果添加多个则后添加的会覆盖之前添加的 -->
2021-07-06 14:25:38
379
原创 Vue必备小知识
什么是MVVM?Model-View-ViewModel 模式,最早在 2005 年微软推出的基于 Windows 的⽤户界⾯框架 WPF 中提出,而最早采用 MVVM 的前端框架是 2010 年发布的 Knockout。Model 层对应数据层的域模型,主要用来做域模型的同步。通过 Ajax、fetch 等 API 完成客户端和服务端业务模型的同步。在分层关系中,它主要⽤于抽象出 ViewModel 层中视图的 Model。View 层作为视图模板存在,其实在 MVVM
2021-07-06 01:52:31
684
1
原创 TPC特性
TCP的特性主要有以下5点特性: TCP 提供⼀种⾯向连接的、可靠的字节流服务 在⼀个 TCP 连接中,仅有两⽅进⾏彼此通信(⼴播和多播不能⽤于 TCP) TCP 使⽤校验、确认和重传机制来保证可靠传输 TCP 将数据分节进⾏排序,并使⽤累积来确认保证数据的顺序不变和⾮重复 TCP 使⽤滑动窗⼝机制来实现流量控制,通过动态改变窗⼝的⼤⼩进⾏拥塞控制 你知道哪些常用的端口号,以及它们对应的服务?端口 用途 21 主要⽤于FTP(File T
2021-07-06 01:39:44
677
原创 HTTP协议
1. HTTP有哪些⽅法?HTTP 1.0 标准中,定义了3种请求⽅法:GET、POST、HEADHTTP 1.1 标准中,新增了请求⽅法:PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT2. 各个HTTP方法的具体作用是什么?方法 功能 GET 通常⽤于请求服务器发送某些资源 POST 发送数据给服务器 HEAD 请求资源的头部信息, 并且这些头部与 HTTP GET ⽅法请求时返回的⼀致。 该请求⽅法的⼀个使⽤场景是在下载⼀
2021-07-06 01:29:35
302
原创 前端面试大全(HTML&CSS&JS基础)
HTML基础1. HTML 文件中的 DOCTYPE 是什么作用?HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准DOCTYPE 即 Document Type,网页文件的文档类型标准。主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。DOCTYPE 需要放置在 HTML 文件的 <html>标签之前,如:<!DOCTYPE html><html> ...</html> (目前
2021-07-05 01:35:50
1027
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人