小豪boy-CSDN博客

原创 TortoiseGit常用的功能

简单记录一下，TortoiseGit常用的功能。

2022-04-10 22:51:58 1056

一、路由守卫1. 路由守卫是什么简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。应用场景举例：路由页面跳转时候进行登陆验证、路由跳转判断。2.路由守卫分类路由守卫分为：全局的、单个路由独享、组件内的三种：全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解析守卫）、

2022-01-08 12:26:41 810

原创 Vue项目开发配套工具入门

一、VueCLI的使用和单文件组件1.VueCLI的使用1.1 前期环境安装 node，会附带 npm。1.2 安装Vue脚手架工具 @vue/clinpm install -g @vue/cli# OR 指定版本npm install -g @vue/cli@4.5.91.3 创建一个 vue 项目运行以下命令来创建一个新项目：vue create hello-world你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + E..

2021-12-14 12:45:04 1305 1

原创 Composition API的使用

一、setup函数的使用一个组件选项，在组件被创建之前，props被解析之后执行。它是组合式 API 的入口。const app = Vue.createApp({ template: ` <div @click=handleClick>{{message}}</div> `, setup(props, context) { // return 中返回的属性可以在template中使用 retur.

2021-12-03 14:12:50 450

原创 Vue中的高级语法

一、Mixin 混入的基本语法Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。1. 选项合并注意：组件 data、methods 优先级高于mixin data、methods 优先级。生命周期函数，先执行 mixin 里面的，再执行组件里面的。const myMixin = { data(){ .

2021-12-01 14:22:45 552

原创使用vue实现css过渡和动画

一、过渡和动画得区别过渡：通常用来表示元素上属性状态的变化。动画：通常用来表示元素运动的情况。二、使用Vue实现基础得css过渡与动画1. 动画/* css */@keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transfor

2021-11-23 13:50:49 4187

原创 vue组件的使用

一、组件的基础1. 组件的定义定义组件：应用API（component）。<!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

2021-11-05 21:19:16 200

原创 Vue基本语法

一、Vue 中应用和组件的基本概念1. vue的导入<script src="https://unpkg.com/vue@next"></script>2.MVVM 设计模式MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层。3. 创建一个vue应用<!DOCTYPE html><html lang="en">&lt..

2021-11-03 16:37:58 160

原创前端面试题合辑

一、HTML面试题1. 对 HTML 语义化的理解让人更容易读懂（增加代码可读性）。让搜索引擎更容易读懂（搜索引擎优化：SEO）。常见的语义化标签：<header></header> 头部<nav></nav> 导航栏<section></section> 区块（有语义化的div）<main></main> 主要区域<article></artic

2021-10-27 11:40:00 230

原创网页加载过程+性能优化+安全

一、网页加载过程1. 加载资源的形式 htm代码。媒体文件，如图片、视频等。 Javascript CSS。 2. 加载资源的过程DNS解析：将域名转化为IP地址。浏览器根据 IP 地址向服务器发起 http 请求。服务器处理 http 请求，并返回给浏览器。3. 渲染页面的过程根据 HTML 代码生成 DOM Tree 。根据 CSS 代码生成 CSSOM 。将 DOM Tree 和 CSSOM 整合形成 Render Tree

2021-10-22 19:35:46 2782 1

原创 http 面试题

一、http 状态码1. 状态码分类1xx 服务器收到请求。 2xx 请求成功，如 200。 3xx 重定向，如 302。 4xx 客户端错误，如 404。 5xx 服务器错误，如 500。2. 常见状态码200 成功。 301 永久重定向（配合 location，浏览器自动处理）。 302 临时重定向（配合 location，浏览器自动处理）。 304 资源未被修改。 404 资源未找到。 403 没有权限。 500 服务器错误。 504 网关超时。二、h

2021-10-22 15:35:31 890

原创 JS-Web-API-Ajax-面试题

一、XMLHttpRequest1. GET 请求和 POST 请求2.readyState 的5种状态0：未初始化。尚未调用open()。 1：启动。已经调用open()，但尚未调用send()。 2：发送。已经调用send()，但尚未接收到响应。 3：接收。已经接收到部分响应数据。 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了。3. status 状态码2xx - 表示成功处理请求，如 200。 3xx - 需要重定向，浏览器直接...

2021-10-21 17:08:09 236

原创 JS-Web-API-存储-面试题

一、cookie1. cookie 是什么本身用于浏览器和 server通讯。被“借用”到本地存储来。可用 document. cookie=来修改。2. cookie 的缺点存储大小，最大4KB。 http 请求时需要发送到服务器端，增加请求数据量。只能用 document.cookie = '.....' 来修改，太过简陋。二、localStorage 和 sessionStorage1.localStorage 和 sessionStorage 的特点.

2021-10-21 11:50:00 163

原创 JS-Web-API-事件-面试题

一、事件绑定简单版通用事件绑定函数：包含事件代理的通用事件绑定函数：注： selector:是个css选择器字符串。 target.matches(selector) : 如果元素被指定的选择器(selector)字符串选择返回true; 否则返回false。二、事件冒泡基于 DOM 树形结构。事件会顺着触发元素向上冒泡。应用场景：代理。示例： e.stopPropagation() 的作用是阻止事件...

2021-10-21 11:33:20 128

原创 JS-Web-API-BOM面试题

一、BOM是什么BOM（BrowserObjectModel，浏览器对象模型）是JS与浏览器窗口交互的接口。一些与浏览器改变尺寸、滚动条滚动相关的特效，都要借助BOM技术。二、window对象BOM的核心对象是window对象，它表示浏览器的一个实例。即是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。其主要有 ducoment，location，history，navigator，screen等对象以及方法。子对象说明..

2021-10-20 20:56:38 409

原创 JS-Web-API-DOM面试题

一、从 JS 基础知识到 JS Web APIJS 基础知识，规定语法（ECMA 262 标准）。 JS Web API，网页操作的 API（W3C 标准）。前者是后者的基础，两者结合才能真正实际应用。二、DOM 本质DOM（DocumentObjectModel，文档对象模型）是JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便。 DOM是JS操控HTML和CSS的桥梁。 DOM最大的特点就是将文档表示为节点树。 DOM是哪种基本的数据结构？ ——...

2021-10-20 20:10:34 356 1

原创 js面试题--异步和单线程

一、单线程js 是单线程语言，只能同时做一件事。 js 和 DOM 渲染共用同一个线程，因为 js 可能会修改 DOM 结构。二、异步为什么要使用异步：程序在遇到等待（网络请求，定时任务）时，不能卡住。常见的异步模式有：回调函数、promise、async/await等。详细说明链接：什么叫异步-CSDN博客。三、同步和异步的区别异步不会阻塞代码执行。同步会阻塞代码执行。...

2021-10-20 15:14:07 431 1

原创 js面试题--作用域和闭包

一、 js作用域作用域，就是变量起作用的区域（范围）。 1. 全局作用域（在函数和 {} 之外）。 2. 函数作用域（在函数内部）。 3. 块级作用域（ES6新增，在 {} 中）。题目：创建 10 个 <a> ，点击弹出序号。1. 全局声明序号 i<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewp.

2021-10-18 20:20:20 604 1

原创 js面试题--原型和原型链

一、class 和继承1. 基本实现class的核心：constructor、属性、方法。继承的核心：extends、super、扩展或重写方法。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1.0"> <title&gt

2021-10-18 11:29:30 716 1

原创 js面试题--变量类型和计算

一、变量类型1. 值类型常见值类型：String(字符串)，Number(数值)，Boolean(布尔值)，Undefined，Symbol(表示独一无二的值)2. 引用类型常见的引用类型：Array(数组)，Object(对象)，Function(函数)，Null。3. 值类型和引用类型的区别详细说明链接：JavaScript基本数据类型_小豪boy的博客。二、typeof运算符识别所有值类型识别函数判断是否是引用类型（但不.

2021-10-17 22:36:43 1644 2

原创 CSS面试题

一、布局1. 盒子模型的宽度如何计算？<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型</title> <style> #box1 {

2021-10-17 10:45:49 148

原创 HTML面试题

一、如何理解 HTML 语义化？让人更容易读懂（增加代码可读性）。让搜索引擎更容易读懂（搜索引擎优化：SEO）。例如下面两段代码：注：右边的代码，即使在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。更加详细的解释：理解HTML语义化 - freeyiyi1993 - 博客园。二、块级元素、哪些是内联块（行内块）元素、哪些是内联（行内）元素？每一个网页元素都有一个display属性，用于设置元素显示的类型，通过display属性设...

2021-10-16 14:00:31 112

原创 Sass入门

一、Sass官网：Sass中文网。二、VSCode 插件 Live Sass CompilerVisual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS。1. 安装打开VSCode编辑器，然后按ctrl+P，键入ext install live-sass 。2.用法/快捷方式 Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以停止实时编译。按F1或..

2021-10-11 20:31:27 104

原创移动端事件

一、移动端事件有哪些触摸事件 touch事件 pointer事件手势( gesture)事件传感器( sensor)事件二、touch事件touch 相关的事件跟普通的其他 dom 事件一样使用，可以直接用 addEventListener 来监听和处理。最基本的 touch 事件包括4个事件：touchstart：当在屏幕上按下手指时触发 touchmove：当在屏幕上移动手指时触发 touchend：当在屏幕上抬起手指时触发 t

2021-10-11 13:39:29 1903

原创移动端屏幕适配

一、移动端屏幕适配与响应式布局的关系移动端适配响应式布局终端仅移动端 PC端和移动端常用单位宽高：rem / % 字体：px 宽：% 高、字体：px 宽和高宽和高都随着屏幕大小变化等比例宽度变化，高度不变非等比例二、简单适配方案docEl.style.fontSize = viewWidth / ratio+ ' px

2021-10-11 11:55:30 118

原创响应式布局

一、概述响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。二、媒体查询1. 什么是媒体查询？媒体查询：通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。媒体查询是响应式网页设计的关键部分，因为它允许您根据视口的大小来创建不同的布局。2.媒体查询语法@media mediatype and|not|only|, .

2021-10-10 22:42:11 208

原创移动端常用单位

px / % / em /rem / vw / vh* /1. px2. %3. em1em = 1 * font-size, 5em = 5 * font-size 如果自身有 font-size 的话以自身为准，如果自身 font-size 就是以 em 为单位或者没有 font-size 的话，就会从父容器继承。 em 不经常使用，但是有时也会比较好用，如：字符缩进。4. remrem 是 root 根元素的 font-size ，即 html 元素的 font-s

2021-10-10 21:34:53 685

原创 flex布局--入门

1. 什么是 flex 布局Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。2. 基本概念2.1 什么是 flex 容器（flex container）？采用 flex 布局的元素，称为 flex 容器。.box { display: flex | inline-flex;}2.2 什么是 flex 项目（flex item）？flex 容器的所有子元素自动成为容器成员，称为 flex

2021-10-10 21:08:37 242

原创 box-sizing和图标字体

1.box-sizingbox-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。 content-box：盒模型宽/高 = width/height + padding + border border-box：盒模型宽/高 = width/height 2.图标字体阿里图标字体地址：...

2021-10-10 19:11:56 64

原创移动Web开发基础概念

1. 分辨率：1792 * 828 像素分辨率，指的是横向有 828 个点，纵向有 1792 个点。2. 物理像素(physical pixel)分辨率中所说的点就是一个物理像素也叫设备像素(dp: device pixel)。3. CSS 像素CSS 像素是实际开发中使用的像素也叫逻辑像素(logical pixel) 、设备独立像素 (dip: device independent pixel)。4. 设备像素比 (dpr: device pixel ratio

2021-10-10 18:46:50 106

原创在 Webpack 中使用 art-template

一、搭建Webpack环境1. 项目目录2. 初始化项目npm init3. 安装 Webpack 相关依赖包npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12 html-webpack-plugin@4.3.04. 修改scripts"scripts": { "start": "webpack"}二、安装、配置 art-template1. 安装art-templa..

2021-10-08 22:52:09 703 2

原创 art-template 的语法

一、官方文档：介绍 - art-template。二、输出1. 转义输出标准语法：{{value}}{{data.key}}{{data['key']}}{{a ? b : c}}{{a || b}}{{a + b}}原始语法：<%= value %><%= data.key %><%= data['key'] %><%= a ? b : c %><%= a || b %><%= a + b .

2021-10-08 21:14:17 327

原创模板引擎 art-template 的基本使用

1.引入 art-template<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>2. 准备好模板<script id="tpl-students" type="text/html"> {{each students}} <li>{{$value.name}}--{{$value.age}}--{{$value..

2021-10-08 19:24:14 326

原创使用 Vue 实现 CSS 过渡与动画效果

一、基础使用通过 class 实现。动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>使用 Vue 实现 CSS 过渡与动画效果</title> <style> /* 动画 */ @keyframes rightToLeft { 0% { transform

2021-10-08 16:22:47 534

原创 Vue实例 property

名称描述 $data 组件实例正在侦听的数据对象。 $props 当前组件接收到的 props 对象。 $refs 一个对象，持有注册过refattribute的所有 DOM 元素和组件实例。 $attrs 包含了父作用域中不作为组件props或自定义事件的 attribute 绑定和事件。 $refs一个对象，持有注册过refattribute的所有 DOM 元素和组件实例。<!DOCTYPE html><h...

2021-10-08 11:32:11 553

原创 Vue内置组件

名称描述 component 渲染一个“元组件”为动态组件。 keep-alive 主要用于保留组件状态或避免重新渲染。 slot <slot>元素作为组件模板之中的内容分发插槽。<slot>元素自身将被替换。 1.component渲染一个“元组件”为动态组件。依is的值，来决定哪个组件被渲染。is的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。<!DOCTYPE html><ht...

2021-10-08 11:31:59 179

原创 Vue常用指令

指令描述 {{}} 插值表达式 v-text 更新元素中的text内容 v-html 更新元素中的 innerHTML v-if 根据表达式的真假值来有条件地渲染元素。 v-else-if 表示v-if的“else if 块”。可以链式调用。 v-else 为v-if或者v-else-if添加“else 块”。 v-for 基于源数据多次渲染元素或模板块。 v-on 绑定事件监听器。 v-bind ...

2021-10-07 12:40:27 96

空空如也

写文章时遇到的换行问题