- 博客(57)
- 收藏
- 关注
RSS订阅原创 手写深拷贝
let oldObj = { id:1, name:'马冬梅' ， msg:{ age：18 } }let newObj = {}deepCopy(newObj , oldObj){ for(let k in oldObj){ let item = oldObj[k]; // 判断是数组？ 对象？ 简单类型 if（item instanceof Array）{ newObj[k] = [] deepCopy(newObj[k],item) }else if
2022-01-19 14:01:18
214
原创 vue.observable()
1、observable 是什么observable翻译过来可以理解成 可观察的vue 中的定义Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器Vue.observable({ count : 1})2、使用场景在非父子组件通信是， 通常可以使用vuex 或者bus 但是使用的功能不太复杂 使用这两个又有点繁琐，这是o
2022-01-18 19:52:56
735
原创 详解Es6 includes字符串方法
在开发中，经常会碰到判断一段字符串中是否包含某项字符的需求，用es5常用的方法通常是indexOf()去解决，例如 :var str = ‘这是测试字符串’;if(str.indexOf(‘测试’) != -1){console.log(true) //包含}else{console.log(false) //不包含}或者三目也可str.indexOf(‘测试’) != -1 ? console.log(true) : cosnole.log(false) ;而es6
2021-08-24 14:03:45
990
原创 微信小程序返回上一页 并刷新数据
微信小程序返回上一页 并刷新数据var pages = getCurrentPages();//获取页面栈if (pages.length > 1) {//上一个页面实例对象var prePage = pages[pages.length - 2];//调用上一个页面的onShow方法prePage.onShow()}
2021-05-27 16:15:13
859
转载 推荐几款vue开发的必备的插件
工欲善其事，必先利其器以下就是开发Vue必备插件：Vetur —— 语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）EsLint —— 语法纠错Auto Close Tag —— 自动闭合HTML/XML标签Auto Rename Tag —— 自动完成另一侧标签的同步修改JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js
2020-12-02 11:53:48
2349
2
原创 vue中移动端自适应的postcss-plugin-px2rem插件
flexible主要是用来响应式改变根元素的字体大小安装命令 npm install lib-flexible --save在main.js里面导入命令mport ‘lib-flexible’要把index.html里面的标签删除;因为会自动添加postcss-plugin-px2rem配置内容解释安装命令 npm i --save postcss-plugin-px2rem创建一个名为vue.config.js的文件写入module.exports={css:{
2020-11-10 10:48:51
842
2
原创 vue相关面试题
vue篇### 一、vue组件 父子、子父 、兄弟通信父传递子 在父组件中给子组件标签上绑定一个属性，属性上挂在需要传递的值 在子组件通过peops：[“自定义属性名”]来接收数据子传递父（1）在父组件中给子组件标签绑定一个自定义事件，给这个事件 挂载需要调用的方法（2）在子组件的方法通过this.$emit(’自定义事件名‘)来调用这个方法兄弟组件通信（1）创建一个空的vue实例BUS（2）通过BUS.$emit（‘事件名‘）传到空的vue实例中（3）通过BUS.$on(
2020-10-26 20:49:06
278
原创 CSS相关面试题
css篇一、CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器1. 条件Hack条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入 不同的CSS、JS、HTML和服务器代码等。2. 属性Hack比如IE6能识别下划线“*”和星号“*”，IE7能识别星号“，但不能识别下划线，而firef
2020-10-24 17:20:49
148
原创 微信小程序本地存储的异步同步用法详解
官网:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html一：同步wx.setStorageSync(); //存储值 try { wx.setStorageSync('key', 'value') } catch (e) { }wx.getStorageSync(); // 获取值 try { var value = wx.getStorageSync
2020-10-06 21:37:17
523
原创 微信小程序中的组件传值
父传子父组件中的json文件{ "component": true, //设置component为true "usingComponents": { "componentB": "../child2/child2" //这个是引入子组件 }}第二步是在父组件中的wxml中使用子组件中模块<view> .
2020-10-05 11:57:44
794
原创 微信小程序路由跳转
1、保留当前页面 goDel() { wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面 url: "...", //url里面就写上你要跳到的地址 }); },12345672、 关闭当前页面,跳转到应用内的某个页面 goDel() { wx.redirectTo({ url: "...", //url里面就写上你要跳到的地址 }); },123453、关闭所有页面，打开到应用内的某个页
2020-10-05 11:54:16
1893
转载 Vue项目上线前的优化以及项目打包上线流程
电商后台管理系统一.项目优化策略生成打包报告第三方库启用 CDNElement-UI 组件按需加载路由懒加载首页内容定制1、生成打包报告打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：① 通过命令行参数的形式生成报告// 通过 vue-cli 的命令选项可以生成打包报告// --report 选项可以生成 report.html 以帮助分析包内容vue-cli-service build --report② 通过可视化的UI面板直接查看
2020-09-24 23:51:52
4752
原创 npm i 与npm install -S,-D,-g区别
1、npm i是npm install的简写。（区别：npm i会帮助检测与当前node版本最匹配的npm包版本号）运行 npm install module_name 安装插件，用npm install 初始化项目时不会下载模块。2、-S是–save的简写。npm i module_name -S（等同于npm i module_name --save） 安装插件是需要发布到生产环境的3、-D是-dev的简写。 npm i module_name -D（等同于npm i module_name --
2020-09-24 20:16:23
4178
原创 js+html+css实现放大镜
分析1.鼠标在图片区域时，透明小区域出现，放大的区域出现2.鼠标移出图片时，透明小区域小时，放大区域消失3.透明小区域随着鼠标移动1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemov
2020-09-22 23:37:18
140
转载 vue中的provide和inject
一、名词解析：provide：Object | () => Object``inject：Array<string> | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：provide 和 inject
2020-09-22 23:35:48
98
原创 Vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个
2020-09-22 23:33:03
227
原创 vue自定义过滤器filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })1234567var a.
2020-09-21 00:11:30
87
原创 Vue Virtual Dom（虚拟Dom） 和 Diff算法
Vue Virtual Dom（虚拟Dom）/ DiffVue Virtual Dom（虚拟Dom）： 是一个js对象，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作;Diff算法： 用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Virtual DOM： 是一种利用JavaScript构建dom的技术，主要解决了复杂应用程序的维护程度。Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构
2020-09-21 00:03:44
137
原创 vue自定义组件
你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件.
2020-09-18 08:03:13
71
原创 vue 事件修饰符
Vue事件修饰符：stop、once、selt、prevent、capture<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat">
2020-09-17 22:04:29
98
原创 vue自定义指令 directive
自定义指令使用Vue.directive()定义全局的指令v-focus参数1 ：指令的名称，注意，在定义的时候，名称前面不需要加 v- 前缀，但在调用的时候，必须在 指令名称前加上 v- 前缀来进行调用参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。常用的指令相关函数有bind, inserted, update。在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象bind: 每
2020-09-17 21:56:58
149
原创 vue的双向数据绑定实现原理（简单）
理论:双向数据绑定的原理就是劫持数据结合发布订阅者模式实现的。步骤：第一步：创建一个监听者，Observer，监听属性变化，当属性变化的时候，通知订阅者。第二步：创建一个订阅者，watcher 用来接收属于变化的通知并且执行相对应的方法，然后更新视图view。第三部，创建一个解析器，compile ，可以扫描和解析每一个节点相关指令，还可以，初始化模板数据，和初始化相关订阅者图解：...
2020-09-17 09:52:03
171
原创 vue常用指令
vue常用指令总结一.vue指令官网解释指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。1.v-once能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：2.v-show和v-if一样 区别是if是注释掉 v-show是给一个display：none的属性 让它不显示
2020-09-16 22:18:14
200
原创 element-ui 分页器的使用
1. ui组件1.在element-ui找到Paginaion分页器 打开代码拷贝第四个组件2. 在vue template里写 <!-- 分页区 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pagenum" :page-sizes="[1,
2020-09-16 14:24:37
9306
2
原创 Vue生命周期的执行过程
1.beforeCreate( 创建前 )此时组件的选项对象还未创建，el 和 data 并未初始化，created(创建后)Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据 。2.beforeMount（挂载前）完成了 el 和 data 初始化mounted（挂在后） 数据已经渲染在了浏览器的页面上。可做操作：操作DOM节点）3.beforeDestory（销毁前）一般在这一步做一些重置的操作比如清除掉
2020-09-15 21:34:31
169
原创 v-if与v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，
2020-09-15 21:17:45
52
原创 axios封装与api接口管理
一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库二、axios封装步骤安装axiosnpm install axio
2020-09-15 21:03:32
64
原创 js事件模型
事件模型事件用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 IE 才开始有各自的 API 规范。对于事件的触发机制，两个公司都认为页面的触发机制并不只是点击了某个元素，就只触发当前目标元素的事件。比方说：页面有多个同心圆，当点击最里面的圆时，你其实也点击了包含这个圆外面的那些圆。 两个公司对这点的认同是一致的，但是事件流的传播顺序上采用了不同的两种方案来实现，即事件冒泡和事件捕获。一、事件冒泡IE 浏览器从老版本开始就一直
2020-09-13 19:44:19
70
原创 垃圾回收机制和内存泄漏
1:概述js的垃圾回收机制是为了防止内存泄漏，内存泄漏时指：程序中动态分配的一块内存因为某种原因无法释放，造成系统内存浪费，造成系统内存浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。1.标记清除法这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。
2020-09-13 19:10:33
529
原创 JS常用设计模式
单例模式在执行当前 Single 只获得唯一一个对象单例模式，是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中，应用该模式的一个类只有一个实例。即一个类只有一个对象实例。var Single = (function(){ var instance; function init() { // 定义私有方法和属性 // 操作逻辑 return { // 定义公共方法和
2020-09-13 18:54:13
79
原创 js中数组扁平化处理
经典面试题，项目中用js数组操作的地方很多，js数组扁平化是其中一种什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。1.常规方式 递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.le
2020-09-11 14:42:34
84
原创 js事件委托
经典面试题概念事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处:提高性能案例1需要触发每个li来改变他们的背景颜色。<ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li>
2020-09-11 14:36:25
85
转载 js中数组排序（冒泡、快速、插入）
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>ar
2020-09-10 08:55:35
60
原创 Es6数组方法
一、数组类型判断Array.isArray()将数组作为参数传入，返回值为布尔值let arr = [1,2,3]let res = Array.isArray(arr) // true二、伪数组转数组…扩展运算符let str = "hello";let arr = [...str];console.log(arr); // ["h", "e", "l", "l", "o"]三、查找元素find()和findlndex()ES5中可以通过indexOf()和lastIndexO
2020-09-08 20:37:10
489
1
原创 Es5数组方法
改变原数据push 从数组最后一位添加pop 从数组最后一位删除shift 从数组最后以为删除unshift 从数组第一位添加reverse 数据逆转splice 从第几位开始，截取长度， 在切口处添加新的数据sort 数组排序arr.sort(function(a,b){return a-b;}); //正序 return b - a 倒序filter 过滤 return trun则保留这个项，false则过滤掉可以实现数组去重var newArr = arr.filt
2020-09-08 19:37:13
262
原创 http请求方法：GET、POST、PUT、PATCH、DELETE、OPTIONS、HEAD、TRACE
http方法：GET、HEAD、POST、PUT、DELETE、OPTIONS、TRACE、PATCH根据RFC2616第九章说明，http方法的定义有两点：safe and Idempotent，即安全性和幂等性，可以结合这两点对以上方法进行说明1，GET安全、幂等；用于获取资源；2，HEAD安全、幂等；与get方法类似，但不返回message body内容，仅仅是获得获取资源的部分信息（content-type、content-length）；restful框架中较少使用3，POST
2020-09-07 15:53:32
487
原创 Generator 函数
一、什么是Generator 函数例：看下面的Generator函数:function* hGenerator() { console.log("this is generator");}该函数与普通函数的区别是在定义时有个*，执行该函数：function* hGenerator() { console.log("this is generator");}helloGenerator(); //没有执行控制台中没有打印，因此将代码改成如下：function* hGener
2020-09-06 21:01:24
79
原创 async await特点及使用
Async+Await相较于promise代码，优雅简洁了很多，避免了.then嵌套回掉…Async关键字async function fun1(){ return "hello world"}function fun2() { console.log("我是后面的程序")}fun1().then(value=>{ console.log(value)})fun2();//我是后面的程序//hello world复制代码console.log(fun1())复制代码
2020-09-06 20:44:35
334
原创 promise特点
1.Promise 的含义Promise 是异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
2020-09-06 20:42:16
1334
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人