前端
-加油
学无止境
展开
-
javascript继承
还是有缺点:当进行修复子类构造函数的指向Child.prototype.constructor = Child;优点:共享原型对象上的方法,方法定义在父类原型上,复用父类构造函数方法,如say方法。缺:方法不能复用,独立的(各实例不能通过父原型上的方法进行复用)。parent一般将属性封装在构造函数中,将方法定义在原型对象上。不能继承父类原型上的方法,如下例的fun方法。优:可向父类构造函数传参,不共享引用属性。父类实例的构造函数指向也会跟着变。,会存在一份多余的父类实例属性。比如下例子的arr属性。...原创 2022-08-15 17:23:40 · 187 阅读 · 0 评论 -
动态表单配置select
1、通过el-form-item v-for=“(formName, index) in dynamicForm.formNames”遍历多个动态表单,数据项:默认的下拉框属性值:遍历的option是用计算属性el-option v-for=“item in filterOptions[index]”添加表单:实现添加表单实现删除表单:随意的提交全部代码:...原创 2022-07-13 17:48:53 · 530 阅读 · 0 评论 -
Vue.js数据双向绑定原理与实现
数据劫持取实例监听的属性值时,触发getter。触发getter 时添加订阅者到订阅者数组中。在setter通知每一个订阅者更新dom。2.3模板解析模板解析时,把节点值 替换内容后,需要告诉订阅者要更新自己:创建实例。在update中获取最新值 传给回调函数。2.4Dep构造watcher实例时 把实例存到Dep实例中。2.5watcher在update中获取最新值 传给回调函数。收集完watch......原创 2022-06-16 22:26:48 · 192 阅读 · 0 评论 -
Object.keys
1、对象2、数组3、字符串4、构造函数与实例原创 2022-06-16 18:50:11 · 83 阅读 · 0 评论 -
引用变量赋值
1、修改数据对象:数组:2、指向另一个对象3、传参对象:数组:指向新的对象:对象:数组:例子:原创 2022-06-16 01:13:33 · 309 阅读 · 0 评论 -
Object.defineProperty新增/修改属性数据代理
1、给对象添加属性 <script type="text/javascript"> let person = { name:'庄文杰', sex:'男' } //给对象添加属性 参数:给哪个对象添加属性、属性名、配置项 Object.defineProperty(person,'age',{ value:18 })原创 2022-06-15 00:22:54 · 269 阅读 · 0 评论 -
let 块级作用域
1、var 和 let 函数作用域函数执行结束后变量会被js回收机制回收报错2、同一作用域不可重复声明不在同一作用域:3、if{}块作用域4、for的在for(; ; ) {}循环中 (; ;)为父作用域,{}为子作用域而使用var时:使用let但没有赋值时:没有在子作用域定义时:使用父作用域的:修改父作用域的:重复定义:5、使用var:使用let:......原创 2022-06-13 23:19:53 · 328 阅读 · 0 评论 -
JavaScript之防抖和节流
描述两个点击按钮点击第一个按钮:用防抖效果执行函数fn1。点击第二个按钮:用节流效果执行函数fn2。基础功能<body> <button id="btn1">点击实现防抖</button> <button id="btn2">点击实现节流</button> <script> const btn1 = document.getElementById('btn1') cons原创 2022-05-06 14:09:58 · 463 阅读 · 0 评论 -
JavaScript的数组中reduce的9种用法
reduce方法原创 2022-05-05 16:55:27 · 1354 阅读 · 0 评论 -
vue生命周期
示例<body> <div id="app"> <p>{{message}}</p> <button @click="changeMsg">改变</button> </div></body><script> var vm = new Vue({ el: '#app', data: {原创 2022-05-07 11:21:25 · 242 阅读 · 0 评论 -
扩展运算符和剩余参数rest
扩展运算符1、数组合并2、数组拷贝数组深浅拷贝:实现深拷贝:3、将伪数组转为真正的数组剩余参数restES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments 。含有其他参数 rest参数必须放在最后面.........原创 2022-06-12 19:10:00 · 101 阅读 · 0 评论 -
vuex基本使用
1、没有使用vuex时实现:2、使用vuex在main.js 引入 import store from ‘./store’ ,再放入 new vue({})中。store/index.js在vue组件中:$store.state.sum实现或者使用 mapMutations、mapActions 辅助函数将组件中的 methods 映射为 store.commit。记住需要参数传递时@click="fun(n)”绑定事件时带参数实现数组形式:当事件方法名跟vuex中相同的情况下需要传原创 2022-06-07 16:21:22 · 112 阅读 · 0 评论 -
前端权限管理
定义好全部的路由地址(需要权限校验)通过用户不同向后台请求不同的用户权限数据对用户权限做对比:请求数据 与 全部的路由对比,筛选后取出来作为路由配置1、初始化路由router/index.js2、全局路由导航守卫路由权限处理router/permission.js3、封装网络请求方法api/index.js4、封装axios请求拦截和响应拦截utils/http.js5、store状态管理store/index.jsstore/modules/index.js 封装不同模块原创 2022-06-06 16:14:17 · 588 阅读 · 0 评论 -
申请与审核
1、普通用户可以新增申请methods:表格显示的审核信息方法:原创 2022-06-04 21:50:47 · 143 阅读 · 0 评论 -
折叠使用vuex
仅对该 折叠功能 简洁分析过程main中:<template> <el-container style="height:100%"> <!-- 侧边栏 --> <el-aside width="200px"> <Aside></Aside> </el-aside> <el-container>原创 2022-06-02 00:58:58 · 125 阅读 · 0 评论 -
tag面包屑vuex
1、tag.vue首页不能删 默认在<template> <div class="tabs"> <el-tag v-for="(tag,index) in tags" :key="tag.name" :closable="tag.name!=='home'" :effect="$route.name === tag.name ? 'dark' : 'plain' " @click="changeMe原创 2022-06-02 00:48:04 · 380 阅读 · 2 评论 -
instanceof实现原理
instanceof实现原理是判断构造函数的原型对象是否在实例对象的原型链上,是的话返回true,否则返回falsefunction Myinstanof (father,child){ const fp = father.prototype var cp = child.__proto__ while(cp){ if(cp===fp) return true cp = cp.__proto__ } return false}原创 2022-05-31 12:20:06 · 92 阅读 · 0 评论 -
defineProperty和proxy区别
监听对象1、defineProperty只能劫持对象的某一个属性,不能对整个对象进行劫持,如果需要监听某一个对象的所有属性,需要遍历对象的所有属性并对其进行劫持来进行监听。无法监听对象新增属性,// 原始对象const data = { name: 'Jane', age: 21, hhh:{ xxx:'hxhx' } } Object.keys(data).forEach(key => { let oldValue = dat原创 2022-05-31 01:21:12 · 121 阅读 · 0 评论 -
router.beforEach
未完伪代码import Vue from 'vue'import Router from 'vue-router'import xxx from 'xxx.vue'Vue.use(Router)const routes = [ { path:'/xxx', name:'xxx', component:xxx },]const router = new Router({ mode: 'history', routes原创 2022-05-27 21:26:20 · 1250 阅读 · 0 评论 -
js创建对象,构造函数,this,原型,继承
js创建对象1、使用构造函数(各实例间互不影响)(函数声明式创建函数对象)function Fun(){ this.name = ['林北星','张万森','展宇']; this.age = ['17','17','19']; this.fun = function(){ console.log('这是对象的方法'); }}console.log(Fun);var s1 = new Fun();//创建实例对象var s2 = new Fun(原创 2022-05-26 15:12:56 · 228 阅读 · 0 评论 -
回调地狱和promise
promise、async、await、宏任务微任务原创 2022-05-08 13:50:33 · 687 阅读 · 0 评论 -
vue中data为什么是函数
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ,data:Data原创 2022-05-21 11:50:42 · 1180 阅读 · 0 评论 -
set数组去重及与map
1、set创建有两种用add、直接传入数组。const s1 = new Set()s1.add(1)s1.add(2)s1.add(3)const s2 = new Set([1,2,3])console.log(s1)console.log(s2);2、set不含重复const s = new Set()s.add(1)s.add(2)s.add(3)s.add(3)console.log(s);//还是Set(3) { 1, 2, 3 }3、delete、has、s原创 2022-05-18 18:39:56 · 499 阅读 · 0 评论 -
图片懒加载IntersectionObserver
//获取图片元素const images = document.querySelectorAll('img');//scroll滚动事件window.addEventListener('scroll',(e)=>{ //判断每张图片的位置是否出现在可视区域 images.forEach(image =>{ //获取每张图片到顶部的距离 const imTop = image.getBoundingClientRect().top;原创 2022-05-18 16:21:34 · 187 阅读 · 0 评论 -
js之排序算法简洁
此时经过if判断high = mid-1,left还是mid,left>high退出循环。此时经过if判断,low=mid+1>,high还是mid,low>high退出循环。当前 i 往它的左边看,不合适的往后移,腾出一个位置可插入,不断去找这个值应该插在什么位置。所以不管哪种情况,val的位置就是low,或者说是high+1。平均时间复杂度:O(nlogn)最差时间复杂度:O(n^2)平均时间复杂度:O(n^2)最好时间复杂度:O(n^2)最差时间复杂度:O(n^2)平均时间复杂度:O(n^2)原创 2022-05-08 22:33:14 · 738 阅读 · 0 评论 -
watch监听
1、普通监听<body> <div id="app"> <p>年龄:{{age}}</p> <button @click="age++"> 修改age,增加年龄</button> </div></body><script src="vue-2.6.12.js"></script><script> const vm = new Vue(原创 2022-05-18 15:00:56 · 54 阅读 · 0 评论 -
简单实现aside菜单栏折叠 vuex
aside菜单栏折叠原创 2022-05-13 18:16:50 · 876 阅读 · 1 评论 -
mock模拟数据显示折线图柱状图饼图
效果图1、安装mocknpm i mockjs2、mock.js引入mockimport Mock from 'mockjs'//模块的方式将回调函数引入import homeApi from '@/api/mockServeData/home.js'//拦截器规则 url地址 回调函数返回具体的数据Mock.mock('/home/getData',homeApi.getStatisticalData)3、模拟数据 home.js// mock数据模拟imp原创 2022-05-14 16:04:51 · 734 阅读 · 0 评论