vue
朕爱偷菜
有人相爱,有人夜里开车看海,有人leetcode第一题都做不出来。
展开
-
nginx服务器上部署vue项目,刷新或者打开新窗口时出现404的解决方法【转载】【实用】
https://blog.csdn.net/qq_42498327/article/details/105475421转载 2022-02-10 16:31:02 · 432 阅读 · 0 评论 -
vue中props的“双向数据绑定”
转载转载 2022-02-07 14:50:24 · 700 阅读 · 0 评论 -
表单验证的trigger能否重写
开发中遇到自定义的非标准的输入组件,发现trigger:change不能按理想的方式触发【我添加删除功能,点删除时,不会触发change】,于是我想能不能重写trigger。后来我发现另一种思路:在合适的触发change事件。这完美地解决了我的问题。nice!参看链接:https://blog.csdn.net/weixin_43908123/article/details/108755594...转载 2022-01-12 11:51:35 · 83 阅读 · 0 评论 -
vue2跨域,亲测有效。
proxyTable: { '/copyright':{ target: "http://abc.com:9001/", secure: false, // 如果是https接口,需要配置这个参数 changeOrigin:true, pathRewrite:{ '^/copyright':'/' } } },配置完后记得重启项目。搞定!...原创 2022-01-04 10:53:37 · 383 阅读 · 0 评论 -
vue-cli实现导出excel【转载】
转载:https://blog.csdn.net/weixin_45498167/article/details/110621715转载 2021-12-28 09:58:33 · 140 阅读 · 0 评论 -
【vue的mixins】
vue的mixins使用与vue.extend相同的策略,读过vue.extend的源码,就知道怎么回事了。记录一下。原创 2021-12-21 10:02:30 · 109 阅读 · 0 评论 -
decodeURIComponent与decodeURI区别
let str = decodeURI(location.href).slice(index + 7).split('&')[0]this.searchValProps = strstr = location.href.slice(index + 7).split('&')[0]this.searchValProps = decodeURIComponent(str).trim()对比以上两个this.searchValProps的区别:decodeURIComponent得到原创 2021-12-17 16:09:00 · 267 阅读 · 0 评论 -
vue 点击当前路由重新加载该路由
总结的相当不错,记录一下。https://www.cnblogs.com/slightFly/p/12073692.html转载 2021-12-17 10:53:21 · 1514 阅读 · 0 评论 -
element组件自带的事件如何阻止其冒泡
如下示例,@confirm.stop并不能组织事件冒泡,那怎么办? <el-popconfirm title="这是一段内容确定删除吗?" @confirm.stop="deleteWork($event, item.id)" > <div slot="reference" class="delete-work">删除</div> <原创 2021-12-17 10:41:41 · 2438 阅读 · 3 评论 -
blob数据转为下载链接
createObjectURL我用过,window.navigator.msSaveOrOpenBlob还没用过。记一下.聊天群【前端苞米地-2号地】的记录:用save-file包吧 或者直接使用createObjectURLhttps://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURLconst blob = dataconst url = window.URL // || window.webkitURL || wi转载 2021-12-10 17:31:16 · 795 阅读 · 0 评论 -
vue中,data定义的数组是如何实现响应式的,结合实例反映对源码的理解程度。
下面是我项开发中的一个例子。说明:已知data中定义了List:[],getDownloadRecord、getWorkDetail均是Promise请求,现在发现getDownloadRecord返回的数组A的每条数据属性太少了,现在想在数组A的每条数据上加一个work对象属性,这个对象通过getWorkDetail获取。那么如何保证最后的List数组是响应式的(⊙o⊙)?答:获取A后,对其遍历用getWorkDetail加work属性,将每次遍历的异步存储下来,通过await Promise.all原创 2021-12-08 15:53:47 · 1115 阅读 · 0 评论 -
vue中多做兜底工作,多判断,减免复杂的语法报错带来的隐患。
对比下以下两个代码片段,说明哪个更好?片段一: // 获取uuid get_uuid (state) { // 解密uuid return (state.uuid && secret.decrypt(state.uuid)) || (sessionStorage.getItem('uuid') && secret.decrypt(sessionStorage.getItem('uuid'))) || null }片段二:原创 2021-12-06 14:17:33 · 623 阅读 · 0 评论 -
vue,学会利用vue响应式属性
vue中,我现在data中定义: transactionInfo: { author: '', name: '', transactionId: '', transactionTime: '' }然后我们通过接口拿数据,有以下两种方式,如下图的红线框住的上下两处。说一下那种比较好?显然,是上面这种。因为vue中data定义的是响应式的数据,数据的set、get被代理了,只要对数据设置值或取值都能响应式地更新数据;原创 2021-12-03 11:50:01 · 483 阅读 · 0 评论 -
【vue渲染器】patch过程个人理解
更新节点思路:首先,肯定有的是新旧节点两个参数。那怎么比较呢?简单!新旧节点这个说法就说明了它是一个节点跟一个节点的比较,这点很重要,因为问题简化了,就不涉及多个节点。新旧节点要么相同标签,要么不同。只要tag相同,就可以继续比较下去!不同的话,简单,要么移除旧节点,要么覆盖旧节点。tag相同时,如何继续比较下去?考虑到tag身上可能会附带参数和事件,所以第一就是“附带参数和事件”的比较。然后第二点肯定就是子节点的比较。比较第一点很简单,第二点要怎么考虑?这里子节点会涉及多个子节点的问题,所以比前原创 2021-11-26 10:27:13 · 389 阅读 · 0 评论 -
【vue渲染器】当新旧节点内部只有很小的变化,不用生成新的真实DOM,直接使用上次生成的真实DOM
当新旧节点内部只有很小的变化,不用生成新的真实DOM,直接使用上次生成的真实DOM。显然这样可以减少开销,提升性能。补充:原创 2021-11-25 16:23:33 · 69 阅读 · 0 评论 -
【vue渲染器】patch中如何更新事件
vNode的事件如何更新?把旧的事件全部移除,新的事件全部添加。it’s easy代码:原创 2021-11-25 16:16:14 · 130 阅读 · 0 评论 -
【vue渲染器】patch过程如何实现替换节点的功能
注意这里的prevVnode.el是真实DOM。其中,removeChild() 是用于删除html节点的某个指定的子节点原创 2021-11-25 14:04:53 · 257 阅读 · 0 评论 -
【vue渲染器】vue的mount过程核心
如下图,这个container不应该是vNode要挂载的真实DOM吗?这样拿到的是vNode之前的vNode?是的,没错。如下图:留意到这一行代码:在vNode第一次被mount后,以后都能从container中拿到上一次存的vNode。就算container为项目根节点,也是走这条prevVnode==null的路。...原创 2021-11-25 11:54:13 · 311 阅读 · 0 评论 -
【vue渲染器】函数式组件的实现
下面两个图片展示了函数式组件的vNode形式及挂载的实现,通俗易懂。其中,h(MyFunctionalComponent) 得到:{ tag: MyFunctionalComponent}就是这么简单。原创 2021-11-25 11:22:41 · 213 阅读 · 0 评论 -
【vue渲染器】有状态组件的虚拟DOM表示方式
h(MyComponent)会生成对应的有状态组件的vNode,形如var vNode = { tag: MyComponent}这是关键。原创 2021-11-25 11:08:19 · 219 阅读 · 0 评论 -
【vue渲染器】有状态组件的虚拟dom本质还是html的虚拟dom。
有状态组件的虚拟dom的tag直接指向类名,形如:var vNode = { tag: MyComponent}MyComponent的内部有个render函数,里面返回一个虚拟dom,这个虚拟dom对应真实的html元素,形如:class MyComponent extend BaseComponent { render () { return { tag: 'div' } }}如图两处对应都是vNode,有状态组件的虚拟dom本质还是html的虚拟dom。.原创 2021-11-25 10:45:37 · 215 阅读 · 0 评论 -
【vue渲染器】虚拟dom的属性el指向真实的dom
源码会做如下处理:为每个虚拟dom身上的el属性挂载其对应的真实dom。下图是一个例子原创 2021-11-25 10:06:19 · 240 阅读 · 0 评论 -
从顶层设计看vue
创建一个被继承的基础组件有什么好处?!如何划线处所言!转载 2021-11-23 14:41:11 · 67 阅读 · 0 评论 -
web上传文件,打开新标签页进行预览
代码如下图其中,file.raw 是file文件类型。下面是预览音频的效果原创 2021-11-12 14:23:22 · 830 阅读 · 0 评论 -
es6新特性
1.可选链操作符https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining2.空值合并运算符https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator原创 2021-11-09 14:07:28 · 427 阅读 · 0 评论 -
vue中,如果想在mounted内执行refs操作的函数,会报错说函数不存在
vue中使用了refs操作的函数时,如果想在mounted内也执行一次该函数,直接调用会报错,可以用setTimeOut(()={},200),也可以window监听load事件然后执行。原创 2021-11-08 11:02:54 · 768 阅读 · 0 评论 -
window顶层事件被重写,被覆盖。建议不要window.onresize,而用window.addListener(‘resize‘,callback)
参考https://blog.csdn.net/idomyway/article/details/88729937参考https://wenda.so.com/q/1461326302727013原创 2021-11-01 11:48:17 · 421 阅读 · 0 评论 -
v-for加载不出图片?
使用required(imgUrl)即可如图原创 2021-07-04 17:59:55 · 91 阅读 · 0 评论 -
vue init webpack下载慢?轻松解决!
首先打开cmd1.安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2.淘宝镜像重新安装webpackcpnm install --save-dev webpack3.进入项目目录,执行vue init webpack,可看到瞬间就下载完成!原创 2020-11-03 22:13:56 · 1969 阅读 · 2 评论 -
webpack的plugin作用
显示版权信息如下:原创 2020-11-02 22:38:20 · 207 阅读 · 0 评论 -
file-loader不需要配置,在webpack.config.js加了配置反而不显示!
加了配置,如下不加配置,如下背景图显示出来了原创 2020-11-01 23:04:21 · 137 阅读 · 0 评论 -
webpack使用url-loader时,显示cant find “file-loader”。这里轻松解决!
webpack使用url-loader时,显示cant find “file-loader”办法:更改图中的limit值,如你使用是图片是36kb,就设置37*1024即可。如下图。原创 2020-11-01 21:22:59 · 518 阅读 · 0 评论 -
webpack安装style-loader、css-loader的(UnhandledPromiseRejectionWarning: TypeError: this.getRes
webpack安装style-loader、css-loader的(node:9860)UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function问题的解决原因:webpack与style-loader、css-loader版本不相适用。办法:安装指定版本style-loader、css-loader即可解决下面是我的例子。npm i style-loader@0.23.1 --save-dev原创 2020-11-01 16:29:58 · 182 阅读 · 0 评论