- 博客(43)
- 收藏
- 关注
RSS订阅原创 vue踩坑之H5页面在ios的webview里面，长时间放到后台按钮失灵
在ios上应用切到后台后，再次进入会因为加载打包后的某些文件加载失败导致页面中的跳转按钮失灵
2023-03-03 15:37:44
957
原创 vuex的基本使用
1.vuex是vue里面的状态机 有5大属性state:{} 是仓库里面的数据mutations:{} 修改数据的唯一方式getters:{} 是仓库中的计算属性actions:{} 异步修改仓库的数据 但是最终还是mutations来修改modules:{} 合并状态机2.定义仓库数据state:{key:value}在组件中的计算属性中调用get fn(){return this.$router.state.key;}3.修改仓库中的数据...
2021-11-24 22:48:58
282
原创 vue+typescript的基本语法
1. 首先要在script标签中添加lang属性并且设置为ts// 1.从vue的扩充包中引入核心文件 Vue,Componentimport {Vue,Component} from "vue-property-decorator"//引入组件import Two from "@/components/Two.vue"// 2.使用@Component装饰器@Component({//注册组件 components:{Two}})// 3.暴露组件并继承vue基类expo.
2021-11-19 15:55:53
460
原创 动态面包屑
步骤1:首先是在router文件夹下面的index.js下如果有二级菜单的路由，给一级菜单和二级菜单都要加meta如果没有二级菜单路由，把一级菜单的path交给儿子，只给二级菜单添加meta有二级菜单的路由，一级菜单需要重定向一下。需要的数组 [{path,title},{path,title},{path,title}]如果是一个一级菜单 { path: '', component: Layout, children: [{
2021-11-13 20:31:03
611
原创 前置路由守卫
路由守卫，他是一个方法。拦截路由。路由守卫写在路由暴露之前,在这个方法中会传递一个回调函数，回调函数中传递3个参数router.beforeEach(()=>{}) 也叫做前置路由守卫。里面有3个参数：to 到哪里去from 从哪里来next 放行函数作用 防止别人猜到网址的哈希值后直接跳过登录就可以查看数据router.beforeEach((to, from, next) => { let tk = local.get('tk')...
2021-11-11 16:42:30
2395
原创 axios的三层封装
第一层：最底层封装axios 需要设置默认地址 请求拦截器 响应拦截器新建一个request.js的工具文件，封装和改造axios// 这是个工具js 专门用来封装axios的工具import axios from 'axios'import local from '@/utils/local'// 引入elementui库import { Message } from 'element-ui'import router from '../router'// 1.设置默认地址...
2021-11-11 16:37:22
2671
原创 vue-路由配置-管理系统
页面逻辑:首先要进入登录页面，登录成功后进入首页，首页部分有功能菜单，功能菜单有一级菜单或者二级菜单功能菜单部分的截图：路由设置：//layout是布局组件，左侧是导航菜单，右顶部是面包屑，右底部是路由出口，所以每进入一个页面首先加载布局组件；const routes = [{ path: "/login", component: Login }, // 重定向到login { path: '/',
2021-11-11 16:24:27
724
原创 js-解决回调地域和控制异步顺序
Promise内置对象Promise的介绍Promise 是一门新的技术，是JS中进行异步编程的新解决方案从语法上说:Promises是一个构造函数；从功能上说：promise对象用来封装一个异步操作并可以获取其成功和失败的数据异步编程：fs文件操作，数据库操作，ajax，定时器优势：promise可以支持链式调用，可以解决回调地域问题Promise的方法Promise.all() 将多个promise实例包装成一个新的实例，只有所有的promise都成功了才会成功，只要有一个失.
2021-11-02 15:55:34
521
原创 js-ES5的继承和ES6的继承
ES5的继承四个步骤：1.子类继承父类的属性,改变this的指向2.子类要继承父类原型上的方法3.让子类原型上构造器的指向自身的构造函数4.子类在原型上添加自己方法function Person(name, age, sex) { this.name = name, this.age = age, this.sex = sex } Person.prototype.eat = function() ..
2021-11-02 15:23:22
76
原创 js-MVVC架构
什么是MVVC?MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版模型（Model） - 表示应用程序核心（数据）视图（View） - 用户界面视图模型（ViewModel）- 连接View和Model，当数据发生改变，自动更新View。MVVM框架最常见的特性之一就是数据的双向绑定简单案例对象的Object.defineProperty（obj,prop,descriptor）方法obj：要定义属性的对象。prop：要定义或修改的属.
2021-11-02 15:12:30
483
原创 js-MVC架构
什么是MVC?MVC是一种使用MVC设计创建WEB应用程序的模式，把WEB应用分为三个基本部分：模型（Model） - 表示应用程序核心（数据）视图（View） - 用户界面控制器（Controller）- 应用程序处理请求进行处理，改变Model数据简单的例子--购物车* { margin: 0; padding: 0; } table { ...
2021-11-02 14:50:42
415
原创 js-变量的检测
1.typeof()检测的对象是 number/string/boolean/undefined/funtion// typeof 检测类型 console.log(typeof "jiwd"); //string console.log(typeof 111); //number console.log(typeof false); //boolean console.log(typeof undefined); //undefined console..
2021-10-23 17:44:15
124
原创 js-浅拷贝和深拷贝
let obj = { name: "张三", age: 18 } let user = obj user.name = "李思" console.log(obj); console.log(user);user和obj的地址是同一个，所以user修改了name的值也会影响obj的name值浅拷贝由此出现了浅拷贝：其作用就是用于解决数据共享的问题方式1：合并对象，Object.assign({},对象),...
2021-10-23 15:01:49
51
原创 js-批量渲染数据
使用场景，淘宝京东的商品列表思路：1.从后端拿到所有数据的列表 2.遍历 3.字符串模板将数据放到节点中 4.将节点放到页面中
2021-10-15 19:15:55
270
原创 js-上传头像到后端数据库
思路：1.上传头像按钮，必须要一个file类型的input，将其隐藏，用一个假的图片或者样式替代它2.给input添加change事件，这里必须是change事件，如果有文件的变化才会触发3.获取添加进来的图片的信息用files属性，获取到的是一个数组,里面包含图片的最后的修改时间，文件大小，文件类型，文件名称4.查看后端给的数据类型，需要的是一个file类型，（如果是一个二进制类型的也是同样的方式）5.将图片的信息追加到formData内置对象中6.上传头像的...
2021-10-11 18:44:23
1156
原创 js-mouseover和mouseenter的区别---面试题
1.mouseenter鼠标事件当鼠标移到元素上时就会触发mouseenter事件2.区别mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发。原因：因为mouseenter不会冒泡3.与mouseenter搭配使用的mouseleave鼠标离开事件，同样不会冒泡...
2021-09-28 23:02:12
79
原创 jq-实现手风琴效果
实现功能：1、点击一级类别显示对应二级类别。2、展开一个类别的同时，关闭其他类别。3.一级类别展开和关闭的时候，对应的图标也要跟着改变。 <ul id="first_menu"> <li>苹果<span>+</span> <ul> <li>苹果1</li> <li>苹果2</li&...
2021-09-24 21:40:03
212
原创 js-购物车的全选与反选
<table id="stuInfo"> <thead> <tr> <th><input type="checkbox" id="allcheck">全选</th> <th>学号</th> <th>姓名</th> <..
2021-09-24 16:00:26
234
原创 jq-购物车的全选与反选
全选： 实现思路：将全选选项框的状态值checked和其他的选项框状态值保持一致就可以实现全选的效果反选： 实现思路：只要有一个选项没有被选中，那么全选选项就不会被选中 方式1：给单个的input复选框绑定点击事件，找到所有的input复选框（除去全选复选框）的长度，再找到已经被选中的复选框的长度，如果这两个长度相等表示全选复选框可以被选中，不相等全选复选框不能被选中 方式2：利用标杆思想，首先给单个的复选框绑定点击事件，定义一个标...
2021-09-18 23:08:54
384
原创 js实现简单的视频播放
功能1：播放暂停切换 思路：准备一个播放的图片和一个暂停的图片； 利用标杆思想，设置一个flag变量，播放的时候将flag设置为false，暂停的时候设置为true，如果flag为true则播放同时改变为播放图片，为false则暂停同时改变为暂停图片功能2：进度条显示 思路：首先要获取视频播放的当前时间用currentTime()获取，还有视频的总时间，duration()来获取，用document.body.offsetWid...
2021-09-18 20:08:31
7462
原创 原生js实现搜索历史记录案例
<header> <input type="text" id="search"> <input type="button" id="btn" value="搜索"> </header> <main> <div> <h3>搜索记录</h3> <span id="clear">清空&l...
2021-09-18 12:21:09
2636
原创 js-实现轮播图效果,典型写法
<div id="bigbox"> <ul id="splidebox" style="left: 0;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul id="p.
2021-08-29 00:42:00
98
原创 js-创建追加新节点来添加表格
<!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.
2021-08-27 23:58:19
691
原创 js-利用字符模板来动态添加表格
<!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.
2021-08-27 23:55:56
308
原创 js-实现在线客服功能
* { margin: 0; padding: 0;}ul li { list-style: none;}.online-service { position: fixed; bottom: 100px; right: 50px;}#online_list { width: 50px;}#online_list li { width: 50px; height: 50px; position: rela.
2021-08-26 19:18:55
1814
原创 js-实现选项卡功能
<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } #tab_control { width: 300px; border: 1px solid #ccc; .
2021-08-26 19:14:04
222
原创 js-实现蒙层功能
<style> #mask { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; display: none; } ..
2021-08-26 19:11:57
937
原创 js-回到顶部功能
<style> body { height: 3000px; } #scrollTop { width: 100px; height: 100px; background-color: rgba(0, 0, 0, 0.3); text-align: center; line-height.
2021-08-26 19:09:39
50
原创 js-判断是否为数组,数组排序,翻转,去重
1.console.log(数组名 instanceofArray)//如果是数组返回true,否则返回false2.Array.isArray(obj)如果是对象是数组返回true,否则返回false3.翻转排序<script> let arr = [1, 2, 8, 4, 9, 10] arr.reverse() console.log(arr) // 数组冒泡排序 let arr1 = [1, 92, 38, 43, 91, .
2021-08-23 23:40:30
133
原创 js-作用域链
1.只要有代码,就至少有一个作用域2.写在函数内部的局部作用域3.如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域4.根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链,采取就近原则,站在目标位置出发,一层一层的往外查找<script> var num = 30 function fn() { //外部函数 var num = 40 function innerfn
2021-08-23 16:00:19
38
原创 js-Date对象
(1)定义:let date=new Date()(2)获取年份: let year = date.getFullYear() //获取当前年份(3)获取月份,.getMonth()的返回值是0-11console.log(date.getMonth() + 1) //date.getMonth()是7(4)获取某月中的第几天console.log(date.getDate())(5获取今天星期几,letxq=date.getDay() 返回值是0...
2021-08-23 14:30:42
231
原创 js中Array数组的常用方法
1.concat()数组的拼接var arr1 = ['red', 'yellow', 'blue'] var arr2 = ['green', 'white'] var arr3 = ['red_black'] var new_arr = arr1.concat(arr2, arr3) console.log(new_arr) //["red", "yellow", "blue", "green", "white", "red_blac
2021-08-23 11:50:46
192
原创 用js实现冒泡排序
冒泡排序的原理:例如要求排序结果是从小到大,那么就是前一个数字和后面一个数字相比较,如果前大于后则交换位置,如果后大于前则不交换如下例子:由以上分析可以发现,每一轮交换的次数等于数组长度-1-i所以可以写两层循环,第一层for循环控制交换数据到了第几轮,第二层循环用于交换数据以及交换的次数代码如下:<script> var arr = [5, 4, 3, 2, 1] for (let i = 0; i < arr.length.
2021-08-19 00:49:40
712
原创 js中的arguments数组求任意个数的最大值
1.arguments定义:当我们不确定有多少实际参数传递的时候,可以用arguments来获取,在js中,arguments实际上它是当前函数的一个内置对象,所有函数都内置了一个arguments对象,这个对象里面存储了传递的所有参数1)arguments是一个只能在函数体中使用的数组,2)arguments具有一些数组的方法,例如,数组的lenght,但是不具有数组的pop()和push()例子:求数组任意个数的最大值<script> funct.
2021-08-18 23:05:23
1002
原创 js获取select下拉框的option的值和文本
<!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.
2021-08-18 22:50:46
2692
原创 用html和css3实现简单的轮播效果，没有任何的js
<!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.
2021-08-12 23:27:09
655
原创 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>D.
2021-08-12 22:53:22
552
原创 css使用压线效果3
<!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.
2021-08-12 22:49:59
304
原创 利用css压线2
<style> h2 { /* 这里必须给h2设置固定高度 */ height: 60px; border-bottom: 1px solid red; width: 1200px; text-align: center; margin: auto; } span { /* 将span标签变成行内块之后才可以加宽度和高度 */ dis.
2021-08-12 22:47:44
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人