![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 74
vue 学习及使用记录
「已注销」
这个作者很懒,什么都没留下…
展开
-
记 Vue 数据更新视图不同步的问题
问题描述:控制台打印出数组/对象数据已经修改成功,但是页面上并没有同步更新。解决方法:搜索引擎搜一下可以看到有好多答案了,总结有以下两点:数组:使用数组更新检测方法push()pop()shift()unshift()splice()sort()reverse()对象:Vue.set( target, propertyName/index, value )向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用原创 2020-10-28 15:09:29 · 1886 阅读 · 0 评论 -
vue 中使用 worker-loader 及遇到的问题
Web Worker 使用教程Worker - Web API 接口参考 | MDN版本Vue CLI 3webpack 4worker-loader 3vue-cli3 中依赖的 webpack 版本是 "webpack": "^4.0.0",而 "worker-loader": "^3.0.0" 要求的 webpack 版本是 4 | 5。使用前要检查下各个依赖对应版本,不然会引发一些错误。不同版本配置文件会有所不同,后面介绍。使用参考:vue中使用web workerwebp原创 2020-08-05 19:05:09 · 16042 阅读 · 3 评论 -
终于搞懂了vue 的 render 函数(二)(๑•̀ㅂ•́)و✧
文章目录先来了解下 vm.$scopedSlots深入数据对象JSX注:本文代码都是在单文件组件中编写。代码地址先来了解下 vm.$scopedSlotsvm.$scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。注意: 从 2.6.0 开始,这个 property 有两个变化:作用域插槽函数现在保证返回一个 VNode 数组,除非在返回值无效的情况下返回 undefined。所有的 $slots 现在都会原创 2020-07-07 20:24:24 · 13029 阅读 · 2 评论 -
记一个事件太多的性能优化问题
项目背景:用 iView-admin 做一个组件列表,点击组件弹出组件配置并且可以编辑。问题描述:加了图片库之后,从点击组件到弹出组件配置项用时比没加之前明显感觉长了很多。路由切换也变慢了。用 vue-devtool 查看之后发现每次操作 Events 都增加十几个到几十个,事件很快增到千级。我把图片库写成一个修改图片组件,其他组件的配置项里也会引用这个组件,有的组件修改的图片有十个,那...原创 2019-05-14 16:19:30 · 197 阅读 · 0 评论 -
slot 插槽笔记(与文档基本没差别,仅作学习记录)
文档地址githubVue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。例子(Vue 2.6.0 以上语法)1. 插槽内容子组件 <navigation-link><a v-bind:href="url" class="n...原创 2019-05-14 16:16:46 · 375 阅读 · 0 评论 -
Vue 指令 —— v-cloak
官网用法这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官网示例CSS:[v-cloak] { display: none;}HTML:<div v-cloak> {{ message }}</div>...原创 2019-01-18 11:35:57 · 883 阅读 · 0 评论 -
Vue 中批量下载文件并打包-转
这篇文章写的非常清楚:Vue 中批量下载文件并打包 JSZip转载 2018-08-30 17:36:16 · 4932 阅读 · 0 评论 -
Vue 特殊属性 key
keyVue 官方建议在使用 v-for 时尽量提供 key 属性,但是我一直都没写也没遇到什么问题,最近遇到的bug就是因为没写key。问题描述两个Select联动,当第一个Select选项发生变化时第二个Select可选项option随之变动。但是当一个Select发生变化时,第二个Select的选项并未随之改变(实际上option的value值已经改变了只是label没变)。解决方案...原创 2018-10-24 12:09:21 · 617 阅读 · 0 评论 -
Vue 特殊属性 ref
refref 相当于DOM上的id,注册在子组件上的时候可以直接在父组件的JavaScript代码里引用。需要注意的是:只有在直接父组件的$refs属性中访问到,祖先组件是访问不到的。...原创 2018-10-23 21:24:14 · 361 阅读 · 1 评论 -
Vue Konva - 基于 Canvas 开发的 2d JavaScript框架库 - 简单使用整理
最近项目中用到Vue Konva框架,遇到一些问题基本搜不到,网上的文章基本都是些入门教程什么的。所以本文整理了使用过程中遇到的问题以及解决办法,希望你用到的时候有所帮助。基本是按照我在开发中使用的顺序来写的,使用方法和错误处理没有做单独区分。如有需要可以搜索关键字。2018.8.25需求:类似美图秀秀网页版的拼图工具。但是美图秀秀用的是 Flash,我们用 canvas,所以能参...原创 2018-08-25 18:31:45 · 20307 阅读 · 2 评论 -
vue.js 动态组件缓存 keep-alive
文章目录动态组件如图代码问题keep-alive代码UI 框架的 Tabs 组件(iView)例子动态组件在不同组件之间进行动态切换比如:选项卡,点击不同的tab显示相应的组件。注意:页面上只有当前选择的组件,而不是把所有的组件都列在页面上。通过给组件添加 is 特性来实现。如图代码html:&amp;amp;amp;lt;!-- button按钮 --&amp;amp;amp;gt;&amp;amp;amp;lt;div cla原创 2018-10-09 00:25:56 · 4296 阅读 · 0 评论 -
终于搞懂了vue 的 render 函数(一) -_-|||
文章目录render 函数作用render 函数讲解render 函数的返回值(VNode)render 函数的参数(createElement)createElement 函数的返回值(VNode)createElement 函数的参数(三个)结合代码vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。注:本文代码都是在单文件组件中...原创 2018-10-11 20:32:18 · 154526 阅读 · 12 评论