笔记
Melhor_
个人部署的音乐播放网站:http://melhor.icu/musicSite,欢迎大家指导提建议
展开
-
Vue父、子组件数据的双向绑定.sync
//父组件<div> <hello-world :name.sync="value"> </hello-world> <h1>父组件</h1> <input type="text" v-model="value"> </div><script>import HelloWorld from './components/HelloWorld.vue';export def原创 2021-02-22 10:03:38 · 160 阅读 · 0 评论 -
vue项目搜索框搜索功能
原创 2021-02-19 16:45:33 · 621 阅读 · 0 评论 -
隐藏滚动条
.div_out{width: 100%;height: 100%;overflow: hidden;position: relative;}.div_in {padding-top: 30px;overflow-x:hidden;overflow-y:scroll;position: absolute; /不能使用relative和fixed定位/top:0;bottom:0; /相当于height:100%时的高度/left: 0;right:-17px; /*图层宽原创 2021-02-02 15:49:19 · 117 阅读 · 0 评论 -
canvas验证码
//captcha.js//验证码// 接收外界传入的参数对象params{},更改验证码的样式function Captcha(params = {}) { let middleParams = Object.assign({ lineWidth: 0.5, lineNum: 5, dotR: 1, dotNum: 50, preGroundColor: [10, 80], backGround原创 2020-12-15 15:55:34 · 102 阅读 · 0 评论 -
数组排序的三大方案,冒泡、插入、快速排序。
1.冒泡排序:拿到数组的第一项,然后再和后面的其他项比较,将比较后大的放后面。2.插入排序:首先在数组中拿到一个项,然后再拿一个和手上的比,将大的放右边,小的放左边,后面的也是一样,一个个拿出来,比较,再插入。3.快速排序: 首先拿到数组的中间项,然后再分别拿出数组的数据,大的统一放这个数的右边,小的统一放这个数的左边。/*冒泡排序*/function bubble(ary){ for(let i=0;i<ary.length-1;i++){ for(let j=0;j<ary.原创 2020-11-29 20:36:01 · 216 阅读 · 0 评论 -
Javascript 面向对象编程(一):封装
学习Javascript,最难的地方是什么?我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。Javascript 面向对象编程(一):封装Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对原创 2020-11-29 01:11:42 · 82 阅读 · 0 评论 -
js编程面试题总结。
第一题:实现(5).add(3).minus(2)输出结果6~function fn(){ //可以添加一个方法检测是否为有效数据 //function check(n){ // n = Number(n)//可以强制转换为数字类型,非数字为NaN // return n // }; function add(n){ return this + n; }; function minus(n){ return this - n; }; ["add", 'minus原创 2020-11-28 23:30:00 · 273 阅读 · 0 评论 -
Javascript 的 this 用法详解(指向问题及如何改变)
关于this的指向问题。1.纯粹的函数调用,this指向全局,windowvar a = 1; function fn(){ console.log(this)//Window console.log(this.a)//1 }; fn();2.作为对象方法被调用,这时this指向这个上级对象。var a = 1; function fn(){ console.log(this)//this指向obj console.log(this.a)//undefin原创 2020-11-26 15:50:01 · 107 阅读 · 0 评论 -
es6 中Promise的使用
0.Promise的介绍1.Promise 是什么是一种异步解决的方案 对比es5传统的解决异步的方案(回调函数,会产生回调地狱问题)1.第一中使用方法,实现类似抛硬币正反面。var p= function(){ return new Promise((res, rej)=>{ if (Math.random() < 0.5) { res() } rej() }) } p().then(res=原创 2020-11-24 19:53:53 · 100 阅读 · 0 评论 -
深入了解防抖debounce和节流throttle的区别和使用场景。
简单来说防抖和节流都是为了减少函数的频繁调用,但是防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。1.使用场景。在调用window.onscroll方法时候,或者在搜索输入框上经常需要用到。2.封装防抖函数。防抖 触发高频事件后delay秒内函数只会执行一次,如果delay秒内高频事件再次被触发,则重新计算时间。function debounse(callback, delay = 300){//delay=300 设置一个默认值 va原创 2020-11-24 16:06:09 · 165 阅读 · 0 评论 -
前端基本面试题1.0
1.你了解三次握手吗?客户端与服务器之间数据的发送和返回的过程当中需要创建TCP;TCP不存在连接的概念,只存在请求和响应,请求和响应都是数据包,它们之间都是经过由TCP创建的一个从客户端发起,服务器接收的类似连接的通道,这个连接可以一直保持,http请求是在这个连接的基础上发送的;在一个TCP连接上是可以发送多个http请求的所谓的三次握手即TCP连接的建立。这个连接必须是一方主动打开,另一方被动打开的。首先客户端向服务器端发送一段TCP报文。服务器端接收到来自客户端的TCP报文之后,结束LI原创 2020-11-18 20:44:25 · 140 阅读 · 0 评论 -
less的函数/关键字。
1.判断类型的lsnumber(): 判断是否位数字;lscolor(): 判断是否是颜色;lsurl(): 判断是否是路径;2.颜色saturate: 增加一定数值的颜色饱和度;lighten: 增加一定数值的颜色亮度;darken: 降低一定数值的颜色亮度;fade: 给颜色设置一定数值的透明度;mix: 根据比例混合两种颜色;3.数学函数ceilfloorroundsqrtabspow...原创 2020-09-30 19:25:18 · 377 阅读 · 0 评论 -
less css预处理语言 less介绍
1.关于less它是一门CSS预处理,扩充了CSS语言,增加了变量、Mixin混合、函数特性等,使css更容易维护和扩展。它不是一种直接使用的语言,而是生成css的语言。less可以运行在node或者浏览器端。(常见的css预编译器有三种:less、sass、stylus)less中的注释以//开头的注释,不会被编译到css文件中。以/**/包裹的注释会被编译到css文件中。less中的变量使用@来声明一个变量:@pink: pink;作为普通变量属性值来使用:直接使用@pink@pi原创 2020-09-30 19:16:43 · 545 阅读 · 0 评论 -
源生js实现轮播图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title></head><body><style> * { margin: 0; padding: 0; list-style: none; } img { width: 400px;原创 2020-09-21 22:45:35 · 179 阅读 · 0 评论 -
fastclick插件,用于解决移动端延迟300ms的使用
1.安装fastclick插件npm install fastclick --save 全局安装2.导入fastclick包 import FastClick from 'fastclick'3.调用attach函数来使用FastClick.attach(document.body)原创 2020-09-11 23:15:22 · 110 阅读 · 0 评论 -
浏览器导航栏的图标更改方法
我们修改自己的图标,在应用主页head中加这句话favicon.ico就是自己的logo原创 2020-09-11 22:30:40 · 875 阅读 · 0 评论 -
async 和 await 的使用
asyncasync表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。async函数返回一个Promise对象,async函数内部return语句返回的值,会成为then方法回调函数的参数async 函数返回的 Promise 对象,必须等到内部所有 await 命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到 return 语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。//下面代码模拟了一个抓取和一个下载原创 2020-08-28 23:01:01 · 257 阅读 · 0 评论 -
原生的AJAX请求和使用Promise封装的AJAX请求
Q: 原生的AJAX请求和使用Promise封装的AJAX请求区别?A: Promise 其实也是原生js新的特性,使用Promise可以很好的解决这些问题:1.处理错误,比如网络请求失败2.如果发生错误,也可以传值3.也可以处理JavaScript的错误4.很好的解决比如回调也是一个异步操作的情况原生的AJAX请求 //原生的发送 ajax 请求 //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化对象原创 2020-08-28 22:37:06 · 292 阅读 · 0 评论 -
使用Promise的优缺点及一些常见的问题
promise的缺点1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。2、如果不设置回调函数,promise内部抛出的错误,不会反应到外部。3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。promis的优点1.解决回调地狱(Callback Hell)问题(1)有时我们要进行一些相互间有依赖关系的异步操作,比如有多个请求,后一个的请求需要上一次请求的返回结果。过去常规做法只能 callback 层层嵌套,但嵌套层数过多的话就会有 callba原创 2020-08-28 22:30:28 · 10826 阅读 · 0 评论 -
路由进阶 导航守卫介绍使用
路由进阶 导航守卫使用参数或查询的改变并不会触发进入/离开的导航守卫1.全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... })//有三个参数 to from nextrouter.beforeEach((to, from, next) => { console.log(from, to); next()})to: Route: 即将要进入的目标 路由对象from: R原创 2020-08-24 22:31:07 · 585 阅读 · 1 评论 -
路由 编程式导航 (通过JS代码来编写的)
路由 编程式导航 (通过JS代码来编写的)路由分为:编程式导航声明式导航1. 编程式导航this.$router.push("/home")该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查询参数,变成 /原创 2020-08-24 17:03:28 · 622 阅读 · 0 评论 -
路由嵌套
1.嵌套到路由about页面上,指定路由路径<router-link to="/about/new">新闻</router-link>指定路由展示<router-view></router-view>//about<template> <div> <h2>关于</h2> <router-link to="/about/new">新闻<原创 2020-08-24 16:34:20 · 120 阅读 · 0 评论 -
cli4+webpack 创建vue项目简单的vuerouter使用
1.创建项目vue create name2.安装路由npm install vue-router创建router文件夹创建index.js文件导入Vue和VueRouter通过Vue.use(插件),来安装插件创建VueRouter对象配置路由路径导入路由显示组件导出//index.js//1.导入import Vue from "vue";import VueRouter from 'vue-router'//2.使用Vue.use(VueRouter)//导原创 2020-08-24 02:05:37 · 229 阅读 · 0 评论 -
vue中使用图片懒加载--vue-lazyload 插件
在vue中使用图片懒加载详细指南说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。使用方式使用vue的 vue-lazyload 插件 插件地址1.Installation 安装方式npm install vue-lazyload -d2.用法在main.js 入口文件import VueLazyLoad from 'vue-lazyload'//导入Vue.use(VueLazyLoad, {原创 2020-08-09 17:52:32 · 189 阅读 · 0 评论 -
error Type of the default value for ‘goods‘ prop must be a function vue/require-valid-default-prop
error Type of the default value for ‘goods’ prop must be a function vue/require-valid-default-propeslint语法报错之一 props: { goods: { type: Object, default: {} } },eslint严格的语法要求,代码需要这样改正: props: { goods: {原创 2020-08-09 17:24:53 · 608 阅读 · 0 评论 -
vue踩坑:error ‘res‘ is assigned a value but never used no-unused-vars
写代码的时候,遇到了这样的一个报错: error ‘res’ is assigned a value but never used no-unused-vars错误原因:eslint的验证语法解决办法:在错误语句后添加注释// eslint-disable-line no-unused-vars原创 2020-07-24 00:12:22 · 5786 阅读 · 0 评论 -
Vue报错:Mixed spaces and tabs no-mixed-spaces-and-tabs 解决办法
Vue报错:Mixed spaces and tabs no-mixed-spaces-and-tabs解决这错误比较合理且简单的方法是:1.找到配置文件:test目录下的.eslintrc.js文件2.然后到rules里,手动添加’no-mixed-spaces-and-tabs’,然后定义为0,关闭规则...原创 2020-07-22 21:47:34 · 34075 阅读 · 12 评论 -
个人对Promise的认识
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。由于 Promise 是 ES6 新增加的,所以一些旧的浏览器并不支持,苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。构造 Promise现在我们新建一个 Promise 对象:new Promise(function (resolve, reject) { // 要做的事情...});通过新建一个 Promise 对象好像并没有原创 2020-07-20 11:41:25 · 404 阅读 · 0 评论