- 博客(68)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 2021Vue前端面试题总结（含答案）
1、html及css部分2.Js部分 2.1数据类型面试官：JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？⭐⭐⭐⭐⭐答：基本数据类型有 Number String Boolean Null Undefined Symbol（ES6新增数据类型） bigInt引用数据类型统称为Object类型，细分的话有 Object Array Date...
2021-06-29 09:06:48
17679
原创 js 实现完整版淘宝购物车
功能分析：1、实现单选和全选2、实现商品数量的加减和输入，小计金额和总件数也跟着发生改变，以及判断是否选中3、实现选中商品金额总计4、 可以删除商品，删除商品后的总件数以及已选择件数，和总金额的改变5、可以加入购物车，加入购物车后的总件数的改变，以及拥有相应的功能1、HTML相关代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2021-01-21 19:02:11
4170
1
原创 Sass 详细教程
1、Sass 介绍Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。 Sass 生成良好..
2020-12-24 20:45:40
1157
1
原创 css盒子模型及一些相关属性详细解析
系列文章目录前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、CSS 盒子模型1.CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。注：最常见的盒子是divspanCSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模...
2020-12-09 19:56:38
3775
1
原创 css选择器优先级解析和font属性解析
文章目录系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言欢迎~1.多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性：而内部样式表拥有针对 h3 选择器的两个属性：h3 { color:red; text-align:left; font-size: 8pt; }h3 { tex...
2020-12-08 20:09:46
1190
原创 这是HTML常用几个标签详细解析！！！
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
2020-12-03 19:49:34
735
原创 vue相关面试题（含答案解析）
目录一、vue相关38、vuex 面试题3、Webpack 扩展4、axios扩展答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom
2022-07-08 16:34:22
1881
1
原创 用HTML+CSS做一个漂亮简单的个人网页详细解析
css：文件存放css样式img:存放图片home:首页form:登陆提交about:关于我的css文件结构 img文件：图片自己找，对应html文件中引入地址改下，或者图片名改成下边 2.2 index.css3.1 form.html3.2 form.css4..1 about.html4.2 about.css......
2022-06-10 09:39:25
4667
原创 本地运行vue打包的dist文件
1、全局安装 express-generator执行命令 npm install express-generator -g2、 项目初始化(这里把项目名设置为server) express -e server3、进入项目根目录 cd server → npm i 安装依赖 → npm start 运行4、将dist中文件复制到server 中 public文件中5、浏览器输入http://localhost:3000查看项目...
2022-03-09 09:44:47
2128
原创 2分钟学会小程序中使用vant组件库
如何在小程序中使用vant组件库？一、npm init 生成package.json 配置文件二、安装包执行命令npm i @vant/weapp -S --production三、修改 app.json将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。将"lazyCodeLoading": "requiredComponents"删除四、使用npm包打开微信开发者工具，点击 工具 -
2022-03-03 09:12:57
622
原创 echarts 绘制地图
例图：var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = [121.4648, 31.2891];var t = 1;var r = 1;//所有地点坐标var geoCoordMap = { 江苏: [118.8062, 31.9208], 黑龙江: [127.9688, 45.368], 内蒙古: [110.3467, 41.489...
2022-03-02 08:56:40
1684
2
原创 elemen-ui tree树形选择器隐藏外层选择框
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1'...
2022-03-01 17:22:31
926
原创 nginx常用命令
nginx -s reopen #重启Nginxnginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s stop #强制停止Nginx服务nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）nginx -v #显示版本信息并退出令killall nginx #杀死所有nginx进程...
2021-07-30 17:51:04
66
原创 微信小程序开发介绍
1、进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐2、下载微信开发者工具，前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装 。3、获取自己APPID登录小程序后台，可以在菜单 “开发”-“开发设置” 看到小程序的AppID4、打开app创建项目，把自己AppId粘贴官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/...
2021-05-26 20:47:46
165
原创 2021前端面试题以及答案解析
1.v-show和v-if有什么区别 什么时候使用最好区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。2.带宽增加，什么方式去考虑问题1.病毒 在服务器上安装杀毒软件，进行杀毒。2.网络攻击 登陆阿里云管理控制台，查看云盾中的防护 DDOS 攻击是否调整好阈值， 并核实是否
2021-05-26 20:39:40
2159
原创 定时器+时间戳实现防抖和节流
//防抖，使用定时器 function debounce(fn, delay) { let timer = null return function() { if (timer) { clearTimeout(timer) } // timer = setTimeout(fn, delay) .
2021-05-20 14:25:26
1109
原创 js对象的深拷贝
1、利用json转换，但是对象中的键不能为本身 function cloneJson(o) { return JSON.parse(JSON.stringify(o)) } let obj = { a: { c: 1 }, b: {} }; obj.b = obj; console.log(JSON.parse(JSON.stringify(obj))) // 报错 // Convert...
2021-05-20 14:13:32
80
原创 在vue脚手架中更改axios的请求参数为form Data
一步到位：在axios的配置文件中，添加配置：import axios from 'axios'import Qs from 'qs'// 自定义axiosconst instance = axios.create({ // 自定义axios的相关配置 // 配置公共的请求接口地址前缀 transformRequest: [function(data, headers) { ...
2021-05-18 17:03:29
260
原创 vue的生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id.
2021-04-26 20:44:56
498
原创 vue组件
vue 的组件 组件是可复用的 Vue 实例，且带有一个名字： 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。 组件模板必须只能存在一个根元素 组件的注册全局注册Vue.component('自定义的组件名', 组件的配置项)// 组件的配置项 : template, data, methods, comput
2021-04-26 20:40:38
110
原创 vue的指令解析
v-if v-else v-else-if：条件渲染 和js中的if..else类似 v-for：循环 v-on：绑定事件 v-bind：绑定属性 v-html：插值语法可以识别HTML标签 v-text：插值语法等同于vue内置插值{{}} v-show：条件渲染，控制css样式 v-model：表单元素的双向绑定 v-pre：跳过该元素和其子元素的编译过程 v-once:只渲染一次，随后的重新渲染，元素/组件及..
2021-04-26 20:26:08
314
原创 vue面试题
vuejs 基础必备1、active-class 是哪个组件的属性？嵌套路由怎么定义 active-class 是 vue-router 模块的 router-link 组件的属性 使用 children 定义嵌套路由 2、怎么定义 vue-router 的动态路由? 怎么获取传过来的值在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id 获取3、vue-router 有哪几种导航钩子?
2021-04-26 10:51:18
238
原创 js-for循环制作乘法表
效果图完整代码如下，添加了一些样式：<!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, initial-scale=1.0
2021-03-06 15:32:08
257
1
原创 ES6 let 声明变量和旧的var声明变量的区别
1、ES6新增的关键字letES6新增的关键字let与var声明相似。大部分情况下，我们可以用let代替var或者var代替let，都能达到预期的效果：var message = "Hi";alert(message); // Hi2、let和var的不同2.1 let不存在变量提升var 存在变量提升。即变量在声明之前使用时，值为undefined。js会将声明语句放在所有js代码之前执行。例如：console.log(a);var a ...
2021-03-04 20:48:41
258
1
原创 前端js轮播图超好用的网站-Swiper-使用介绍
swiper是一款免费，强大的滑动的插件。使用步骤：1.引入插件（可以使用网络地址，也可以下载到本地）2.创建HTML结构3.初始化swiper 实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...
2021-03-02 20:32:47
622
1
原创 JS实现轮播图-无缝衔接
1、在这里封装了一个改变元素节点的运动的函数，方便使用：function move(node, obj, callback) { // node节点也是一个对象。 可以自定义属性。 clearInterval(node.timer); node.timer = setInterval(function() { //所有的运动都已经完成 var isEnd = true; for (const attr in obj) {
2021-03-02 20:23:27
1219
2
原创 ES6解构赋值
ES6 解构赋值概述解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。解构模型在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分。 解构的目标，解构赋值表达式的左边部分。数组模型的解构（Array）实例： const arr = [1, 2, 3, 4]; // 数组的变量解析，变量用[]包括去一一匹配
2021-02-24 19:16:26
119
原创 js箭头函数
1、箭头函数ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。实例：let sum = (a, b) => a + b;/* 这个箭头函数是下面这个函数的更短的版本：let sum = function(a, b) { return a + b;};*/alert( sum(1, 2) ); // 3可以看到(a, b) => a + b表示一个函数接受两个名为a和b的参数。在执行时，它将对表达式a + b求值，并返回计...
2021-02-24 19:01:19
471
原创 JS中的this指向
this指向：与我们常见的很多语言不同，JavaScript 函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。JavaScript 中，普通的函数调用方式有三种：直接调用、方法调用和new调用。除此之外，还有一些特殊的调用方式，比如通过bind()将函数绑定到对象之后再进行调用、通过call()、apply()进行调用等。而 es6 引入了箭头函数之后，箭头函数调用时，其this指向又有所不同。下面就...
2021-02-23 18:41:48
169
原创 （css）盒子水平、垂直居中方法
利用定位和margin：1、给要居中盒子的父盒子设置相对定位2、给要居中的盒子设置固定定位3、水平left、垂直top都设置为50%4、利用margin，margin-top和margin-left各设置为负的自身宽高的一半实例：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA
2021-02-22 20:39:42
210
原创 鼠标右键菜单-复制删除粘贴剪切
功能分析：1、鼠标右键点击元素节点，如果没有选中元素节点中的内容，则点击复制会复制整个元素节点2、如果元素节点内容被选中则复制元素节点中选中的内容3、点击剪切，复制元素节点，删除原有节点4、点击粘贴则会把复制的内容粘贴到鼠标点击的位置5、点击删除会删除点击的节点代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
2021-01-23 14:12:14
1623
原创 JS 图片放大镜
需求：1.小遮罩可以随鼠标在小盒子上移动2.遮罩层有自己的移动范围3.鼠标在遮罩层的中心4.大盒子默认是隐藏的。5.当鼠标停留在小盒子上时，大盒子显示6.当鼠标在小盒子上移动时，按比例移动。效果图：上代码！<!DOCTYPE html><html lang="en"><head>...
2021-01-22 11:41:14
95
原创 送女朋友-css动画制作立方体相册
直接上代码！嵌套立方体相册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2021-01-22 11:18:44
285
原创 原生js制作扫雷-自定义难度
游戏功能：1、有四个难度2、可以自定难度1、html相关代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫雷</title> <sc
2021-01-21 18:49:51
511
原创 JS Cookie获取值
Cookie Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分，由RFC 6265规范定义。Cookie 通常是由 Web 服务器使用响应Set-CookieHTTP-header 设置的。然后浏览器使用CookieHTTP-header 将它们自动添加到（几乎）每个对相同域的请求中。最常见的用处之一就是身份验证：登录后，服务器在响应中使用Set-CookieHTTP-header 来设置具有唯一“会话标识符（session identifier...
2021-01-21 17:45:27
3272
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人