- 博客(159)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 Vue常见面试题
一、谈谈你对MVVM的理解？映射关系简化，隐藏controller MVVM在MVC的基础上，把控制层隐藏掉了。Vue不是一个MVVM框架，它是一个视图层框架。ViewModal是一个桥梁，将数据和视图进行关联。二、谈谈你对Vue中响应式数据的理解？数组和对象类型的值变化的时候，通过defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递
2022-04-01 15:51:30
912
原创 day49-git
Git在实际工作中，我们会遇到很多无法预料的问题：问题一：频繁改需求。例：项目开发好以后，形成版本v1.0需求改变：在v1.0的基础上添加功能A，形成版本v1.1 - 在上个版本的基础上添加功能A在v1.0的基础上添加功能B,形成版本v1.2 - 在上个版本的基础上删除功能A，添加功能B在v1.1的基础上添加功能C，形成版本v1.3 - 在上个版本的基础上删除功能B，添加功能A，再添加功能C在v1.2的基础上添加功能D，形成版本v1.4 - 上个版本的基础上删除功能A，删除功能C.
2022-02-21 16:25:01
376
原创 day48-gulp
gulp引入：项目做好以后，在上线之前还有一些工作需要去做： 压缩css 压缩js 压缩图片 编译sass 合并文件 。。。 等等，在前端工作流出现之前，这些工作都由人力完成，而这些工作往往比写业务本身更加费时，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。前端的构建工具常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。概念：gulp是一个自动化构建工具，主要用来设.
2022-02-21 16:17:07
434
原创 day47-SASS
简介css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。初体验html结构：<div id="..
2022-02-21 16:04:54
187
原创 五星好评效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt=""><img .
2022-01-21 17:07:01
509
原创 组合模式实现tab切换、轮播图、放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/14-组合模式.css"></head><body> <!-- tab切换开始 --> <di..
2022-01-21 16:56:35
1036
原创 class方法封装工具库
var tool, Tooltool = Tool = (function(){ class Utils{ noConflict(bool = false){ if(!bool){ window.tool = undefined }else{ window.tool = window.Tool = undefined return thi.
2022-01-21 16:43:03
160
原创 使用class方法实现放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.middle{ width: 400px; height: 400px; position: relative;}.middle>img{ wid..
2022-01-21 16:40:50
436
原创 使用class方法实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .carousel{ width: 600px; height: 300px; border:1px solid #000; margin:50px aut..
2022-01-21 16:39:20
390
原创 使用es6的class方法实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto;}..
2022-01-21 16:37:27
432
原创 day46-设计模式
设计模式概念设计模式是为了解决某种问题，而设计的一套最佳解决方案。常见的设计模式： 单例模式 组合模式 观察者模式 命令模式 代理模式 工厂模式 策略模式 。。。 单例模式让一个类创建出来的所有对象，里面的所有属性和方法都一模一样。比如封装一个类，将一些常用的操作函数作为方法放进去，以后每次都使用同一个对象来调用这些方法正常情况，一个类创建出来的每个对象都是不一样的。class Carousel{.
2022-01-21 16:35:06
154
原创 day45-闭包和继承
闭包和继承闭包如果让我们去开发一个银行账户的系统，账户的钱应该怎么用程序实现呢？我们首先想到，应该存在变量中。然后我们可以访问到这个变量的值（查询余额）、进行加法运行（存钱）、减法运算（取钱）。。。是很方便，但问题也随之而来：放在全局中的变量，是任何人都能访问到的，那就是任何人都能进行修改，这样对于账户来说是很不安全的。所以我们将这个变量放在局部，局部变量在全局中访问不到，是很安全，要想访问这个局部变量，我们只能将这个局部变量作为函数的返回值，如下：function account()
2022-01-20 19:45:36
543
原创 使用数组生成二维码
<!doctype html><html><title>My_QR_code</title> <head> </head> <h2>扫扫看看有什么吧</h2><body> <canvas id="canvas" width="500" height="500" style="border: 2px solid #ddd"></canvas><scrip..
2022-01-20 16:57:31
470
原创 拼图验证码
<!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"> <title>..
2022-01-20 16:46:03
521
原创 简易网站锚点布局
<!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"> <link rel=".
2022-01-19 20:05:10
383
原创 淘宝精品展示案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { ..
2022-01-19 19:55:29
305
原创 鼠标移动显示效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; }..
2022-01-19 19:52:35
290
原创 卷帘式下拉菜单案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } ...
2022-01-19 19:48:35
230
原创 滑动导航效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> ul{ list-style-type: none; padding: 0; margin: 0; position:..
2022-01-19 19:38:34
238
原创 day44-jQuery（三）
JQ高级工作中，项目中常用的发送ajax请求的方式： 原生js的ajax 使用jquery的ajax fetch - H5内置的请求函数 axios - 专业发送ajax请求的第三方模块 jquery发送ajax请求get请求语法：$.get('请求地址', 参数, 成功的回调函数, 'json');参数1：请求地址参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式参数3：成功的回调函数，参数为响应回来的的数据参数4：希.
2022-01-19 19:28:05
285
原创 day43-jQuery（二）
jquery对象==伪数组 元素节点操作创建元素：$("标签和内容") // 创建一个标签并给里面放内容例：var box = $("<div class='box'>div盒子</div>");console.log(box);创建的结果：创建的元素 添加元素给父元素追加子元素：父元素.append(子元素)例：<div> <span>span标签</span>...
2022-01-18 17:36:09
120
原创 jQuery动态创建滑动轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.carousel{ width: 600px; height: 300px; border:1px solid #000; position:relativ..
2022-01-18 14:10:07
443
原创 使用nodejs搭建聊天室
搭建一个服务器//引入fsvar fs = require('fs')//引入http var http = require('http')var date = new Date()/** * @FormDate 格式化时间 * @param {*} date 当前时间 */function FormDate(date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date
2022-01-17 20:08:24
2360
原创 使用jquery实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto;...
2022-01-17 19:33:25
3604
原创 使用jquery实现全选反选效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script></head><body><but...
2022-01-17 19:30:09
212
原创 简易抽奖效果
<!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>D.
2022-01-17 19:17:05
301
原创 day42-jQuery（一）
<span style="background-color:#f7f7f7"><span style="color:#777777">typora-copy-images-to: media</span></span>jQuery介绍jQuery是js的库。库就是说将很多js的方法封装在了一个文件中。jQuery是前端编程中使用最多的库。曾经风靡前端。原因有三： 强大的选择器机制 优质的隐式迭代(遍历) 无所不能..
2022-01-17 17:23:29
201
原创 简易后台效果
<!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"> <title>管.
2022-01-14 17:29:15
329
1
原创 环绕鼠标旋转效果
<!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>C.
2022-01-14 17:23:24
641
2
原创 day41-Node
node简介node.js是浏览器的js引擎。浏览器中有一个js引擎用来解析js代码，只能解析js代码中的ECMAScript，dom和bom的解析依赖的是浏览器本身。将这个js引擎单独拿出来，就是node了。node.js和js的关系node.js和js的关系 要让这个引擎运行起来，有人将他做成了一个软件，安装在电脑上，js代码就不用依赖浏览器运行了，在电脑的命令行也能运行js代码。为什么要这么做？因为这样的话，js就能写后台了。官网：Node.js中文.
2022-01-14 17:16:02
190
原创 day40-Promise
回调函数概念：将一个函数当做参数传入另一个函数的时候，这个函数就叫回调函数。我们之前用过很多次回调函数，比如：数组方法map、filter等；运动函数中处理运动结束传入的函数；分页插件中使用插件的时候执行的函数。。。包括封装的ajax中，请求成功以后执行的success函数。都是回调函数。为什么要使用回调函数？当我们执行一些异步操作的时候，需要在操作完成以后，做另外的一些事情，但是我们又没有办法预知这个异步操作什么时候结束，此时只能使用回调函数的形式来解决这个问题。回调地狱我们在封装
2022-01-13 20:03:46
142
原创 jsonp模拟百度搜索关键字
<!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"> <title>D.
2022-01-13 20:03:20
158
原创 使用promise构造函数封装ajax
*//** * 发送ajax请求的函数 * @param {object} obj 发送ajax的配置项 * @returns undefined */function ajaxPromise(obj){ return new Promise(function(resolve, reject){ if(obj.url === undefined) throw new Error('请求地址不能为空') if(Object.prototype.toStri.
2022-01-13 13:55:31
140
原创 css实现飞翔的鸟
<!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" /> <title>飞翔的小鸟&l.
2022-01-13 11:48:30
488
原创 ajax代码封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script>function ajax(obj){ // 判断url // 判断是否传入 if(obj.url ===..
2022-01-12 17:41:03
388
原创 钟表案例
<!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"> <title>D.
2022-01-12 17:33:59
112
原创 滑块验证案例
<!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"> <title>..
2022-01-12 17:28:03
436
原创 day39-ajax（下）
ajax同步异步ajax是可同步可异步的一种技术。在ajax对象调用open方法的时候，其实有第3个参数，值是布尔值，代表是否异步，默认为true。当将第3个参数设置为false的时候，这次请求就变成了同步请求：var xhr = new XMLHttpRequest;// 省略了第三个参数：布尔值 - 代表当前请求是否异步 - 默认是true// xhr.open('get','http://localhost:8888/test/first', true);xhr.onrea
2022-01-12 17:23:56
309
原创 弧形运动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.box{ width: 30px; height: 30px; background-color: #f00; position:absolute; .
2022-01-11 19:38:53
241
原创 进阶烟花效果
<!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"> <title>&.
2022-01-11 19:34:06
315
node.js服务器安装
2022-01-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人