- 博客(58)
- 收藏
- 关注
RSS订阅原创 Vue2虚拟DOM和diff算法
对比旧虚拟DOM和新虚拟DOM,对比出哪个虚拟节点改变了，找出这个虚拟节点并只更新其对应的真实DOM，不更新数据没发生改变的节点，,提高性能。定义:一种虚拟的，保存在内存中的数据结构，用来代表UI的表现，和真实的DOM节点保持同步。判断两个Vnode是否为同一类型节点,相同则。新旧虚拟节点的子节点对比，最终的渲染结果都要以。
2023-05-09 11:10:15
123
原创 Vue2中set用法及原理
数据更新，但是视图没有更新。因为 Object.defineProperty()限制，监听不到数组的变化，无法监听新增属性
2023-04-10 16:57:18
767
原创 vue2和vue3响应式原理
Proxy在目标对象之前架设了一层拦截，对外界的访问进行过滤和改写，它劫持整个对象，即对象里的每个数据进行一遍数据劫持，并返回一个新对象。遍历该数据的依赖列表，执行update方法通知watcher进行视图更新。全局对象Dep.target将Watcher进行依赖收集。，若用到data里的某个数据时，会触发其。”相结合的方式实现了。
2023-04-04 10:10:23
104
原创 自定义Palette(二)
定义一个类CustomPalette,导出时可以随意取，引用时候不能随意取使用$inject注入一些需要的变量在类中使用palette.registerProvider(this)指定这是一个palette2.编写核心函数getPaletteEntries代码create.lindaidai-task是自定义一项的名称，它有几个固定的属性：b.编写action代码3.导出CustomPalette4. 在页面中配置使用CustomPalette5.结果展示图......
2022-06-28 15:45:27
453
原创 新闻消息向上滚动动画
html部分<div class="scrollWrap"> <ul :class="{ anim: animateFlag === true}" @mouseenter="animateStopHandle" @mouseleave="animateUpHandle" > <li>信息1</li> <li>信息2</li> <li>信息3</li> <li>信息4&
2022-01-21 17:13:08
348
原创 vue.prototype和vue.use的区别
Vue.use和Vue.prototype区别相同点：都是注册插件的方式，没有本质区别，都是在vue.prototype上添加了一个方法不同点：vue.use适用于注册vue生态内的插件，vue.prototype适用于注册生态外的插件vue.prototype用法需要设置全局变量，在main.js中，Vue实例化的代码里添加。 不想污染全局作用域。这种情况下，你可以通过在 原型 上定义它们使其在每个Vue实例中可用。vue.prototype.$echarts = echartsTips:变
2021-11-30 10:31:41
1508
原创 reduce的用法
概念reduce()方法接受一个函数作为累加器，且上一次的输出会作为下一次的输入。参数prev:上一次调用回调时的返回值cur:当前正在处理的数组元素index:当前正在处理数组元素的索引,若提供init值，则索引为0，否则索引为1init:表示初始值实例先提供一个数组var arr = [3,9,4,3,6,0,9];1.求数组之和var sum1=arr.reduce((prev,cur)=>{ return prev+cur}，0) //34 0表示的是初
2021-06-15 11:32:18
229
原创 微任务，宏任务，事件循环
前言js是单线程的脚本语言，分为同步任务和异步任务，异步任务又分为微任务(MicroTask)和宏任务(MacroTask)。异步任务宏任务（MacroTask)：setTimeout,setInterval,script等微任务（MicroTask）：promise.then,promise.nextTick，awit等事件循环主线程从任务队列中读取事件，这个过程是循环不断的，即这种运行机制又被称为 Event Loop（事件循环)。运行机制先执行同步任务，遇到异步宏任务则将异步宏任务
2021-06-11 15:57:34
127
1
原创 移动端1px产生的原因及解决方案
基本概念CSS像素(虚拟像素):指的是css样式代码中使用的逻辑像素。设备像素(物理像素):指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。px是一个相对单位，相对的是设备像素。设备独立像素(逻辑像素):是计算机坐标系统中的一个点,这个点代表一个由程序使用的虚拟像素(css像素也是逻辑像素)。当逻辑像素是1pt时，在DPR为2的设备上显示的为1px的物理像素注释:缩放因子指的是DPR产生原因设备像素比
2021-06-09 14:29:36
550
原创 Object.keys排序错乱
自动排序const obj={ 100:'一百'， 2:'二', 7:'七'}console.log(Object.keys(obj)); //["2","7","100"]不自动排序const obj = { c: 'c', a: 'a', b: 'b'}Object.keys(obj) // ["c", "a", "b"]原因：Object.keys()在内部会根据属性名key的类型进行不同的排序；属性名的类型是 Number,那么Object.keys返回
2021-05-31 22:44:16
4100
原创 forEach , for in , for of的区别
forEach优点：遍历的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少出错的效率缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，方法不能使用break，continue语句跳出循环，或者使用return从函数体返回,对于空数组不会执行回调函数let obj={a:1,b:2,c:3,d:4} obj.forEach(function(value,index,oObj){ console.log(value) } ） //输出结果会是obj
2021-04-29 16:57:32
127
原创 vue通过a标签下载文件
axios.defaults.withCredentials = true; axios.get(url,{ params: { type: "csv", }, responseType: 'blob', }) .then((res)=>{ let fileName = this.meeting_name+ '——'+name+ ".xls"; ...
2021-04-29 15:59:59
350
原创 Vue-cli 环境变量
1.可以在项目根目录下创建不同环境变量文件.env #在所有的环境中被载入.env.local #在所有的环境中被载入,但会被.git忽略.env[mode] #在指定的模式下被载入 有三种模式 1.development(该模式用于 vue-cli-service serve)； 2.production(该模式用于模式用于 vue-cli-service build 和 vue-cli-service test:e2e) 3.test(
2020-12-11 17:45:11
104
原创 vue 历史模式下ios微信分享失败
问题描述: 进入页面点击分享,分享失败,刷新后可正常分享原因： 在vue-router模式为history的情况下, 由于IOS微信浏览器在验证微信jssdk签名时,需要的URL是第一次进入该应用时的URL, 并不是当前页面的URL, 所以这里需要针对IOS微信浏览器作特殊处理.解决方案:beforeRouteEnter(to, from, next) { // 修复iOS版微信HTML5 History兼容性问题 if (to.path !== lo
2020-06-08 18:37:05
468
原创 安装配置vue-cli3/4
运行时默认浏览器自动打开找到package.json文件找到配置项 scripts找到配置项serve加个字段 “serve”: “vue-cli-service serve --open”
2020-04-27 11:00:43
392
原创 vue-cli3/4移动端适配
一.移动端适配包安装移动端适配包npm i lib-flexible -S在main.js引入适配包import Vue from 'vue'import App from './App.vue'import 'lib-flexible' // 引入适配包Vue.config.productionTip = falsenew Vue({ render: h => ...
2020-04-26 18:20:27
1398
7
原创 vue-cli4全局安装scss
第一步：打开package.json中确认你的项目中是否集成了sass相应的"node-sass"和"sass-loader"两个包，如果在创建项目的时候选择了CSS预处理那个选项，则项目中就会有这两个包，没有就按照以下命令安装npm install node-sass --save-devnpm install sass-loader --save-dev第二步vue.config.j...
2020-04-26 17:15:46
3540
1
原创 FormData多图片上传
$('#uploadImg').change(function(e){ var files=e.target.files; for(var i=0;i<files.length;i++){ var reader = new FileReader(); reader.readAsDataURL(files[i]); ...
2020-04-08 16:26:57
580
转载 CSDN-markdown编辑器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-04-08 16:08:32
85
原创 vue-cli引入手淘移动端适配解决方案
安装lib-flexible,使用命令行npm i lib-flexible --save引入lib-flexible，在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible'添加meta标签，在项目根目录的index.html中添加如下标签<meta name="viewport" content="width=de...
2019-04-10 14:45:00
129
原创 css解决图片底部留白问题
在循环商品详情图片时,发现每个图片有白色间隔,但是并没有设置margin,padding造成原因: 图片的display属性默认inline,而这个属性的vertical-align的默认值是baseline.所以就会出现上图的情况（图片底部出现一个小留白区域）解决方法: 第一种方法:将img的vertical-align设置为middle 第二种方法:将img设为...
2019-04-10 14:26:00
351
原创 MVC,MVP和MVVM的区别
一. MVCMVC：视图(View) :用户界面控制器（Controller）:业务逻辑 模型（Model) :数据保存特点：是单向数据绑定，通过js(控制器)更新Model时，View会自动更新，而View不能更新Model。各部分之间的通信方式如下：View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状...
2019-03-11 17:04:00
147
原创 将数组里某个属性相同的对象合并成一个数组
var array=[ {id:1,name:'小明',sex:'男'}, {id:2,name:'小刚',sex:'男'}, {id:3,name:'小红',sex:'女'}, {id:4,name:'小花',sex:'女'}, {id:5,name:'小甜甜',sex:'女'}, ] v...
2019-03-08 14:12:00
404
原创 Ajax的理解
简介：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。是什么？创建快速动态网页的技术AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。AJAX基于因特网标准XMLHttpRequest对象（与服务器异步交换...
2019-02-26 14:50:00
69
原创 VUE如何关闭Eslint的方法
创建Vue项目的时候，手一抖把Use ESLint to lint your code?(Y/N) 选择了Y，然后到写代码的时候，虽然说是浏览器完全能运行结果，但是在cmd就是一直报错。强迫症没有办法。所以大家安装的时候最好选择N.1.在项目中找到build---->webpack.base.conf.js文件 2. 找到如下代码块，将其注释3.n...
2019-02-22 14:20:00
137
原创 数组去重
方法一：新建一数组，遍历传入数组，值不在新数组就push劲新数组里 ie8以下不支持indexOf方法 var newArr=[]; var arr=[1,2,"2",4,9,"a","a",2,3,5,6,5]; for(var i=0;i<arr.length;i++){ if(newArr.indexOf(arr[i])<0){...
2019-02-16 17:42:00
60
原创 vue-router传递参数的几种方式
vue-router传递参数分为两大类编程式的导航 router.push声明式的导航<router-link>编程式的导航router.push 传递参数分为两种类型：字符串，对象字符串 字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式简单但不能传递参数this.$router.push("home");对象 想要传递参...
2019-02-16 11:51:00
154
原创 密码的显示和隐藏
问题描述： 用户设置密码时显示位不可见......和可见（密码） < ———— > 解决方案： 控制input的type类型，可见时input=text,不可见时input=password $(input).attr('type','text')...
2019-01-31 14:20:00
218
原创 小程序页面跳转数据丢失
问题： 当参数为url时且值含有"?",接收参数时在options中"?"之后字符串被截取例子：let url="http://baidu.com/?a=1"wx.navigateTo({ url:'../detail?url='+url})console.log(options.url) //得到的值http://baidu.com原因： 解析...
2019-01-31 11:52:00
317
原创 Vue路由 --登录状态的判断
前言: 在登录一个系统，要求第一次登录出现登录页面，之后再访问该系统，跳过登录页面。一. router/index.js路由加校验export default new Router({ mode: 'history', base: '/', routes: [{ path: '/Login', name: ...
2019-01-23 18:09:00
120
原创 vue里使用高德地图
一.发现vue-amap发现vue-amap插件，优点是文档详细，易于上手二.使用vue-amap1 准备 在使用这个插件之前，首先需要申请高德地图的key。这个到官网就可以申请。申请过程就不叙述了。2 安装vue-amapnpm包安装：npm install -svue-amapCDN安装：引入组件3 引入vue-amap（这里以npm安装方式为例）4 使用...
2019-01-14 19:15:00
58
原创 js与app交互
1. 判断当前页面的环境 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU...
2019-01-04 15:34:00
77
原创 解决input number类型上下滚动 禁用滚轮事件
1.去掉input在type="number"时的上下箭头 <style> input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance:textfield; } input[type="number"]{ ...
2019-01-03 09:49:00
396
原创 vue中nextTick的作用
参数： 1.{Function} [callback] 2.{Object} [context]用法: 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})/...
2018-12-28 19:25:00
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人