Web前端
Lsx~
快乐才是真谛。
展开
-
⚡️ 聊一聊Nextjs的渲染策略,以及如何选择合适的渲染策略
SSR:Server-Side Rendering,服务器端渲染;SSG :Server-Static Generation,服务端静态生成,也叫编译生成ISR :Incremental Static Regeneration 静态增量生成CSR:Client-Side Rendering,客户端渲染默认情况,Next.js 会预渲染每个页面。这意味着 Next.js 会将网站的所有页面提前生成静态 HTML 文件并保存下来。原创 2024-07-25 11:32:05 · 502 阅读 · 0 评论 -
聊一聊前端动画的种类,以及动画的触发方式有哪些?
动画在前端开发中扮演着重要的角色。它不仅可以提升用户体验,还可以使界面更加生动和有趣。在这篇文章中,我们将深入探讨前端动画的各种实现方式,包括 CSS 动画、JavaScript 动画、SVG 动画等。我们还将讨论一些触发动画的方式和动画在用户体验中的最佳实践。原创 2024-07-22 17:48:13 · 874 阅读 · 0 评论 -
关于Vue中main.js通常定义的东西、项目中的全局配置等等
main.js:// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './App';// import router from './router';// import Element转载 2021-09-10 11:55:02 · 775 阅读 · 0 评论 -
TypeScript泛型及其一些写法
Vue3拥抱Typescript之泛型// 平常写ts可能会这样注解类型,但是这样有些麻烦,能不能简洁点呢//function joi(first: string | number,second: string | number){// return first + second//}// JJ是泛型,在最简单的泛型用法中可以类比形参理解,所以它可以是任意值// 但一般用T表示function joi<JJ>(first: JJ,second: JJ){ return first转载 2021-05-16 09:07:00 · 209 阅读 · 0 评论 -
vue中keep-alive,include的缓存问题(玩好keep-alive)
前提:有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面),B是订单列表页,C是订单详情页,D是费用详情页需求:顺序是A->B->C->D,每次都刷新页面,D->C->B时走缓存,但是每次从A到B都要刷新B页面,从B到C需要刷新C页面,从C到D要刷新D页面在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存。在这里主要用include结合vuex来实现(四个页面组件都有自己的name才会生效,这里name就叫A,B,C,D)从D-原创 2021-03-25 12:11:08 · 989 阅读 · 0 评论 -
Vue报错[Vue warn]: Error in render: “TypeError: “checkedCount“ is read-only“
写vue时报出这样一个错误,某个东西是只读的;报错原因:我在用一个变量的时候,我居然是用const声明的,真不细心。声明变量用let,常量用const;复习一下let和const:1.let(1)不存在变量提升(必须先声明后使用),声明的变量只在所处的块级内有效(2)暂时性死区(3)变量不能重复声明(4)不影响作用域链2.const(1)声明常量(一般大写),并且一定要赋初始值(2)同一个作用域内常量值不可以修改(3)块级作用域(4)对于数组和对象的元素修改,不算作对常量的修改..原创 2021-03-17 17:28:40 · 4115 阅读 · 0 评论 -
Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
不得不说better-scroll是个很好用的第三方框架,但是使用恰当才能发挥它强大的功能哦!具体使用步骤请移步→better-scroll链接Github但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况具体问题:1.使用的时候为什么滚动不起作用首先在在你引入better-scroll成功之后,你的html结构应该如下:<div ref="wrapper" class="wrapper"> <div class="content"></di原创 2021-03-10 22:11:59 · 2742 阅读 · 0 评论 -
Vue报错:NavigationDuplicated: Avoided redundant navigation to current location(提示这是到当前位置的冗余导航)
今天在做电影app时,需求是:有一个长列表,当我们滑动后,进入了另外一个页面之后在返回列表页时,会依旧保持我们第一次滑动的位置。看图:解决方法:在router.js(由于配置不同,或许有些人需写在router/index.js)中写入以下代码:import Router from 'vue-router';const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {原创 2021-03-02 14:45:48 · 759 阅读 · 1 评论 -
Vue中作用域插槽的妙用
昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽为什么scope.row可以获得本行的数据,说明这个大神在封装组件的时候,用了一个插槽<slot :row=data></slot>话又说回来,什么是作用域插槽:当我们在封装组件的时候,要使用作用域插槽,必然会往里面传个slot,通过这个插槽往外面传递数据,我们只需要在此插槽上绑定一个动态属性,然后把数据赋值给这个动态属性(我这里是:data=“PLanguage”),之后我们在使用组件是,或使用其他人封装好的组件原创 2021-02-19 11:20:05 · 468 阅读 · 0 评论 -
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> <style> table {原创 2021-02-17 10:14:23 · 733 阅读 · 0 评论 -
前端js-----vue中的key
在官方文档中是这样解释的:key的特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不能使用key,Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时,它会基于key的变化重新排列元素顺序,并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到(1)完整的触发组件的生命周期钩子(2)触发过度。原创 2021-02-02 11:21:13 · 561 阅读 · 0 评论 -
前端js-----轮播图(焦点图)实现原理
轮播,无论是文字轮播还是图片轮播,他们的原理都是一样的,都是通过定时器setInterval执行循环展示和隐藏。原理:一系列的图片平铺,一般是放在li里面,只显示一张图片,其余图片隐藏over-follow:hidden。通过计算偏移量利用定时器实现自动播放,或通过点击事件切换图片。无缝滚动(优化):当你从最后一张图片切换回第一张图时,有很大空白,这个时候需要把第一张图片所在li克隆一份放到ul的最后面,当图片滚动到克隆的最后的一张图片时,让ul快速的、不做动画的跳到最左侧,让left=0即可。原创 2021-02-01 19:40:18 · 2241 阅读 · 1 评论 -
前端js-----三级联动
效果如下(原生js):------HTML:<body> 请选择省份 <select name="" id="province"> <option value="请选择省份">请选择省份</option> </select> 请选择市 <select name="" id="cities"> <option value="请选择市">请选择市</option> </原创 2021-01-17 10:19:09 · 714 阅读 · 1 评论 -
前端js-----模糊搜索(indexOf)
效果:原生js实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { overflow: hidden; width: 400px; h原创 2021-01-16 10:51:53 · 732 阅读 · 0 评论 -
JS中的数组,对象,字符串常用的方法
JS中的数组,对象,字符串常用的方法数组的常用方法:var arr =[1,2,3,4,5];arr[0] arr[arr.length-1]//通过下标找到数组中指定的元素,访问数组的元素arr.join("-") //数组转成字符串arr.toString() //数组转成字符串arr.push(6); //向后添加,返回新数组个数 ,原数组是添加后的数组arr.pop(); //从后删除,返回删除的元素arr.unshift(); //向前添加,返回个数arr.shift(); //转载 2021-01-14 21:55:48 · 220 阅读 · 0 评论 -
前端js-----抽奖功能(异步)
效果如下:代码如下:HTML:<body> <div id="father"> <div class="option">抱抱</div> <div class="option">亲亲</div> <div class="option">举高高</div> <div class="option">按摩</div> <div id="start"原创 2021-01-12 09:52:05 · 340 阅读 · 0 评论 -
前端js-----选项卡/tab栏(面向对象)
功能效果如下:实现代码:HTML:<!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"> &原创 2021-01-11 10:22:32 · 535 阅读 · 1 评论 -
前端-----CSS三角
1.``<!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> div {原创 2021-01-09 10:52:27 · 81 阅读 · 0 评论 -
前端js-----购物车全功能(jQuery)
效果图:HTML&&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> <script src原创 2021-01-08 14:22:47 · 616 阅读 · 1 评论 -
前端js-----手风琴(jQuery)
运用jQuery效果(功能如下):代码(链式编程):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script原创 2021-01-08 09:24:51 · 182 阅读 · 0 评论 -
前端js-----购物车加减事件(全选和全不选)
原生js(效果图如下):代码(html、css、js没有分离):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .tab{ width: 500px; height原创 2021-01-06 11:58:50 · 663 阅读 · 0 评论 -
前端js-----动态生成表格(节点操作)
针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离):原生js实现(注释里面解释了做法):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 500px; margin: 100px auto;原创 2021-01-05 09:36:56 · 848 阅读 · 0 评论 -
前端js-----DOM事件高级(阻止默认行为&&事件冒泡)
有时候我们不需要一些默认行为,这时我们需要阻止默认行为:代码如下a.onclick = function(e){//e.preventDefault();//适用普通浏览器//e.returnValue;//ie 6 , 7, 8return false;//无兼容,(仅限于传统注册方式,但return后面的代码将不会执行;但是在二级事件中没用)}!!!阻止冒泡(事件)(1)e.stopPropagation();(2)e.cancelBubble = true; // ie 6,7,8原创 2021-01-03 11:16:55 · 457 阅读 · 0 评论 -
前端js-----DOM事件高级
事件高级:注册事件有两种方式,第一个是传统方式;第二个是方法监听注册的方式。addEventListener(); 特点为:同一个元素同一个事件可以注册多个监听器。其参数有三个,第一个参数为type:事件类型字符串,不带on;第二参数为listener:事件处理函数,当事件发生时会调用该监听函数;第三个参数为useCapture:这是个可选参数,是一个布尔值,默认为false,与事件流相关。DOM事件流:(1)JS代码中只能执行捕获阶段或冒泡阶段中的一个阶段。(2)onclick和attach原创 2021-01-02 10:56:52 · 120 阅读 · 0 评论 -
前端js-----DOM之节点操作(增删改)
1.创建节点:document.createElement(‘tagName’);2.添加节点:node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾,其中node为父元素。 node.insertBefore(child,指定元素);将一个节点添加到父节点的指定子节点前面。3.删除节点:node.removeChild(child);返回的是删除的节点。4.复制(克隆)节点:node.cloneNode();返回调用该方法的节点的一个副本(拷贝节点),如果参数为空原创 2021-01-01 09:17:09 · 309 阅读 · 0 评论 -
前端js-----DOM之节点操作
在节点操作中,可以利用几点层次关系获取元素(父子兄节点关系)。一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性。其中元素节点的nodeType为1;属性节点的nodeType为2;文本节点是nodeType为3.1.父级节点(node.parentNode):得到的是离父级最近父级节点,如果找不到父节点,则返回null。2.子节点(parentNode.childNodes):返回包含指定节点的子节点的集合(会包含元素节点,文本节原创 2020-12-27 10:13:33 · 128 阅读 · 2 评论 -
前端-----轮播图(焦点图)
原生js!!!只需要改变img的src即可,其他功能都是动态生成的!!!功能展示: HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/focus.css"/> <!-- 这个动画必须写到focus原创 2020-12-25 19:41:22 · 641 阅读 · 0 评论 -
前端js-----DOM之操作元素
DOM就是Document Object ModelDOM树:文档、元素(所有标签)、节点(标签、属性、文本、注释等)dir的作用,可返回元素对象,更好的查看里面的属性事件三要素:1.事件源 2.事件类型 3.事件处理程序DOM之操作元素:1.表单元素操作2.样式属性操作element.style;在js中产生的是行内样式element.className;类名样式操作(适用于样式较多,功能复杂的情况),如果想要保留原先的类名,可以用多类名选择器,即this.className = ‘fir原创 2020-12-24 10:54:41 · 128 阅读 · 0 评论 -
前端js-----基础(8)
js内置对象:数组对象1.数组索引方法indexOf(数组元素);其返回值为该数组元素的下标,若数组元素重复,他返回第一个满足条件的索引号。若在该数组中找不到此数组元素,则返回-1。可以指定第二个参数,指定开始查找的位置。lastIndexOf(数组元素);这个方法与indexOf()类似,只不过它是从后往前查。2.数组转换为字符串:(1)toString();(2)join(‘分隔符’);其默认为逗号分隔。3.slice()方法;提取出指定数组元素,arr.slice(start,end原创 2020-12-21 16:44:45 · 93 阅读 · 0 评论 -
前端js-----基础(7)
js内置对象:数组对象1、检测是否为数组,instanceof,例:arr instanceof Array2、检测是否为数组,Array.isArray(参数);返回true或false,ie9+3、添加删除数组元素:(1)push();在数组的末尾添加一个或多个数组元素。arr.push(数组元素),push完毕之后,返回的结果是新数组的长度,原数组也会发生变化。(2)unshift();在数组的开头添加一个或多个数组元素。arr.unshift(数组元素);unshift完毕之后,返回的原创 2020-12-19 18:13:25 · 87 阅读 · 1 评论 -
前端js-----基础(5)
js中的对象分为三种:自定义对象,内置对象,浏览器对象内置对象:Math对象(1)Math.abs;求绝对值,例如Math.abs(’-1’);会返回1,存在隐式转换。 Math.abs(‘abc’);会返回NaN,这个的话就不存在隐式转换了(2)Math.floor();向下取整,往最小了取值。例如:Math.floor(1.9);会返回1(3)Math.ceil();向上取整,往最大值取。例如:Math.ceil(1.1);会返回2(4)Math.round();四舍五入取整,(但是.5特殊.原创 2020-12-14 17:02:43 · 82 阅读 · 0 评论 -
前端js-----基础(4)
js对象(万物皆对象,对象是一个具体的事物,不能泛指) 在js中,对象是一组无序的相关属性和方法的集合。 属性:事物的特征(是一个名词)方法:事物的行为(是一个动词)创建对象的三种方式:(1)用字面量创建var obj = {name:‘张三’,age:18,say:function(){console.log(123);}}注意:大括号里面要用逗号隔开,方法冒号后面跟的是一个匿名函数(2)利用new Object创建对象var obj = new Object();obj.n.原创 2020-12-13 23:00:29 · 65 阅读 · 0 评论 -
前端js-----基础(3)
1. js作用域(就是代码名字在某个范围内起作用和效果,提高程序的可靠性,减少命名冲突) (1)全局作用域 (2)局部作用域(函数内部)a.全局变量(全局作用域下的变量) b.局部变量(局部作用域下的变量)!!!注意:如果在函数内部,没有声明直接赋值的变量也属于全局变量。函数的形参也可以看做局部变量。2. 预解析(js引擎会把js里面的所有var,function提升到当前作用域的最前面) 运行js代码分两步:预解析,代码执行 预解析分为:变量预解析(预解析)和函数预解析(函数提升)(1)变量提升:原创 2020-12-12 10:40:32 · 99 阅读 · 0 评论 -
前端H5-----去除button默认样式
给相应的button加上这样的css样式即可: button{ background-color: transparent; border: 0; outline: none; }原创 2020-12-10 22:47:43 · 1110 阅读 · 0 评论 -
前端H+CSS-----对于盒子水平垂直居中的几种解决方式
方式一:利用绝对定位解决HTML代码:<div class="father"> <div class="son"> <span>我是span</span> </div> </divCSS代码:*{ margin: 0; padding: 0; } .father{ position: relative; width: 500px; height: 500.原创 2020-12-05 09:13:07 · 170 阅读 · 0 评论 -
前端JS-----冒泡排序(函数封装)
< 冒泡排序:趟数=数组.length-1,之后两两比较。设flag变量是为了(当该数组有序时,就不必再冒泡排序了) >var arr = [3, 4, 5, 43, 2, 56, 7]; function bubbleSort(arr, count) { var count; for (var i = 0; i < arr.length; i++) { var flag = 1; for (var j = 0; j <= arr.length -原创 2020-12-03 13:14:00 · 572 阅读 · 0 评论