- 博客(20)
- 收藏
- 关注
RSS订阅原创 Vue 搜索匹配并高亮显示匹配内容
匹配到的内容高亮显示，效果如下代码如下// 渲染部分<p v-for="item in machlist" :key="item.index"><span v-for="item1 in item" :key="item1.index" :style="{color: item.color}">{{item.text}}</span><p>// data 部分data(){ return{ searchList:[ {
2021-07-26 15:49:34
960
原创 自学 vue-element-admin 笔记-----介绍
一. vue-element-admin 介绍vue-element-admin 是一个后台前端解决方案，它基于vue和element-UI实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。1.集成方案 vue-element-admin（不适合作为基础模板开发，因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
2021-07-15 13:52:53
567
原创 数组的 pop push shift unshift 分别是什么？
思考功能是什么？返回值是什么？是否会对原数组造成影响？const arr = [10,20,30,40]let res = arr.pop()console.log(res,arr) // 40 [10,20,30] 弹出数组的最后一个元素，返回值是数组的最后一个元素let res = arr.push(50)console.log(res,arr) // 5 [10,20,30,40,50] 在数组末尾添加一个元素，返回值是数组长度let res = arr.unshift(5)
2021-06-30 20:39:44
205
原创 手写深度比较isEqual
function isObject(obj){ return typeof obj === 'object' && obj !== null // 判断是否为数组或对象}function isEqual(obj1,obj2){ if(!isObject(obj1) || !isObject(obj2)){ return obj1 === obj2 // 不是数组或对象，直接比较 } if(obj1 === obj2){ return true // 全等直接返回true
2021-06-30 20:27:48
94
原创 var const let 的区别
var 是 ES5 语法const let 是 ES6 语法var 有变量提升var 和 let 定义的是变量，可重新对其赋值；const 定义的是常量，不可对其重新赋值。let const 有块级作用域，var 没有var a = 100console.log(a) // 100console.log(a) // undefinedvar a = 100// 为何没报错？ES5的规则，执行一段代码时，会先查找有没有var定义的变量，有的话会提前声明出来。即变量提升// 上面的代码相当
2021-06-30 19:50:51
56
原创 Vue 条件渲染
v-if v-else 的用法v-if 和 v-show 的区别v-if 和 v-show 的使用场景<template> <div> <p v-if="type === 'a'">A</p> <p v-else-if="type === 'b'">B</p> <p v-else>C</p> <p v-show="type === 'a'">A by v-show<
2021-06-30 17:04:45
50
原创 Vue watch深度监听
为何深度监听？当 watch 监听引用类型时拿不到 oldValdata(){ return{ name: 'xxx', info: { name: 'xxx' } }},watch:{ name(oldVal,val){ // 监听值类型不用深度监听 console.log(oldVal,val) }, info:{ // 监听引用类型需要深度监听 handler(oldVal,val){ console.log(oldVal,val)
2021-06-30 16:45:08
151
原创 http缓存
关于缓存什么是缓存？页面加载完成一次后，再次加载页面，有些资源没必要再次向服务端获取，暂存一份。为什么要缓存？优化网络请求，让页面加载更快哪些资源可以被缓存？通常情况下：静态资源（js css img）可以被缓存，html不能被缓存强制缓存浏览器向服务器初次发送请求，服务器返回资源和 Cache-Control 。当服务器认为该资源可以被缓存时，才返回 Cache-Control ，如果服务器认为该资源不适合被缓存时，就不会返回 Cache-Control 。浏览器再次发送请求时
2021-06-29 09:12:23
100
原创 手写一个支持普通绑定和事件代理的事件绑定函数
function bindEvent(elem,type,selector,fn){ if(fn === null){ // 传入3个参数时 fn = selector selector = null } elem.addEventListener(type,event => { const target = event.target if(selector){ // 代理绑定 if(target.matches(selector)){ // 判断当前元
2021-06-28 18:45:05
101
原创 JS异步的面试题
1.描述event loop 的机制（可画图）例：① 同步代码一行一行的放在 Call Stack 执行② 遇到异步，会先记录下，等待时机（定时，网络请求等）③ 时机到了，就移动到 callback Queue④ 如果Call Stack 为空（即同步代码执行完）Event Loop 开始工作⑤ 轮询查找 callback Queue 如有则移动到 call Stack 执行⑥ 然后继续轮询查找2.什么是宏任务和微任务，两者区别① 宏任务：setTimeout,setInterval,A
2021-06-28 15:14:40
784
原创 手写一个Promise加载图片
loadImg(src){ return new Promise((resolve,reject) =>{ const img = document.createElement('img') img.onload = () =>{ resolve(img) } img.onerror = () =>{ reject(new Error('图片加载失败')) }
2021-06-28 08:11:37
96
原创 创建10个＜a＞,点击弹出序号
let i, afor(i = 0；i < 10; i++){ a = document.createElement('a') a.innerHTML = i + '<br>' a.addEventListener('click',function(e){ e.preventDefault() alert(i) }) document.body.appendChild(a)}//此时点击所有的<a>弹出的数字都为10let afor(
2021-06-23 17:51:41
200
原创 JS原型和原型链
代码创建一个People类和Student类和一个Teacher类。/* 创建一个People类 */class People{ constructor(name){ this.name = name } eat(){ concole.log(this.name + 'eat something') }}/* 创建一个继承People的Student类 */class Student{ constructor(name,number){ super(name) //继承父类
2021-06-22 17:52:52
77
原创 手写一个深拷贝
思路先判断是否为引用类型，不是则直接返回再判断是数组还是对象递归 /** * 深拷贝 * @param {Object} obj 要拷贝的对象 */ deepClone(obj = {}){ if(typeof obj !== 'object' || obj == null){ //obj 是 null 或者不是对象和数组，直接返回 return obj }
2021-06-22 10:23:36
86
原创 前端常见的HTML CSS面试知识点总结
HTML1.如何理解HTML语义化？· 让人更容易读懂（增加代码可读性）· 让搜索引擎更容易读懂（SEO）对比<div> //不容易读懂 <div> 这是一个大标题 </div> <div> 这是一个小标题 </div> <div> 这是一段文本 </div></div><div> //显而易见的内容，方便读懂 <h1>这是一个大标题</h1
2021-06-21 17:20:21
105
原创 有一个4个长度的数组，每个位置装有0-9之间的随机数字，有10次输入的机会来猜每个位置的上的数是什么， 每次猜完4个数字以后都要给出提示，正确几个 错误几个， 只有位置和数字完全正确才算正确，其
var arr =[]; var count = 0 for(var i = 0 ; i < 4; i++){ arr[i] = parseInt(Math.random()*10); } alert("系统随机生成了四个随机数，请猜猜这四个数，顺序也不能错哦！"); alert(arr); for(var j = 1; j < 6 ;j ++){ v.
2020-11-06 10:11:39
937
1
原创 根据双色球摇奖规则，产生6个红球1个蓝球；红球范围1-33， 蓝球范围1-16. 红球不能有重复的产生。 思路：每次产生一个随机球，存入数组中，下一次产生的随机球，要和数组中的进行比较，如果有相等的
<script> var arrRed = new Array; var Blue = parseInt(Math.random() * 16 + 1) for (var i = 0; i <= 5; i++) { arrRed[i] = parseInt(Math.random() * 33 + 1); } for (var j = 0; j < arrRed.length; j
2020-11-06 10:10:50
2061
原创 JavaScript第三天
循环语句的运用学习笔记1.当循环语句 for语句，while语句先判断，后循环2.直到循环语句 do-while语句 先循环，后判断for循环执行末尾循环体后将再次进行条件判断，若条件还成立，则继续重复上述循环，当条件不成立时则跳出当下for循环。while循环当满足条件时进入循环，进入循环后，当条件不满足时，执行完循环体bai全部语句后再跳出（而不是立即跳出循环）break ，立即退出循环体，后面的循环不再执行。continue ， 退出当前循环语句，然后再继续循环。练习题<s
2020-11-04 18:39:17
263
4
原创 2020-11-03
**JavaScript 第二天**学习内容：1.if else语句。2.if else if语句。3.switch语句。学习笔记：switch做的是恒等判断，值和数据类型都相同。switch主要用来做等值判断，不适合做范围判断。与if else， if else-if语句性能没多大区别break，中断程序，防止穿透。作业题：第一题 <script> var num = window.prompt("请输入一个整数");
2020-11-03 17:46:14
136
原创 JavaScript第一天
学习JavaScript的第一天，作业及代码学习内容：JavaScript的基本语法，数据类型，数据类型的转换问题1.用代码实现变量a中存储的数字10，变量b中存储的数字是31）a除以b后，并取整，在页面输出得到的结果？2）将a%b后得到的结果转换为字符串类型，在打印台输出得到的结果，并验证最终的结果数据类型是否为字符串2.用代码实现输入一数字作为秒数，在页面按小时，分钟，秒的格式输出（ 如输入600，页面显示：0小时10分0秒 ）3.用三元运算符实现1）小明和妈妈约定，期末考试如果语
2020-11-02 18:54:21
251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人