![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
记录Vue遇到的问题和值得记录的问题
小达不溜儿
个人笔记
展开
-
vue-拖拽浏览器兼容问题
背景:当加上draggable="true"时,会导致火狐拖拽出现问题,会触发dragstart事件,然后mousemove和mouseup监听出现问题。但不会影响Chrome浏览器。解决办法:去掉draggable="true"语句,在火狐中拖拽正常了demo正确代码:<template> <div class="wrapper"> <div class="moveBox"> <div class="leftDiv"><原创 2021-07-09 15:26:41 · 715 阅读 · 0 评论 -
Vue.use(UI组件库)原理
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:// 调用 MyPlugin.install(Vue)Vue.use(MyPlugin)new Vue({// …组件选项})Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。插件暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,然后在install中去注册各个组件。官方use源码:import { toAr原创 2021-07-06 12:29:47 · 371 阅读 · 0 评论 -
【vue源码】模板编译
什么是模板编译把用户在标签中写的类似于原生HTML的内容进行编译,把原生HTML的内容找出来,再把非原生HTML找出来,经过一系列的逻辑处理生成渲染函数(render函数),这一段过程称之为模板编译过程。模板编译内部流程:第一步是将 模板字符串 转换成 element ASTs(解析器)第二步是对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化(优化器)第三步是 使用 element ASTs 生成 render 函数代码字符串(代码生成器)解析器整体流程:// 代码位原创 2021-06-04 20:31:53 · 131 阅读 · 0 评论 -
【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
拖动的元素在鼠标按下时通过时间差给元素添加一个属性(drag-flag),若超过规定时间则认为是在拖拽,属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。html:<div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.原创 2021-05-11 15:22:00 · 6205 阅读 · 2 评论 -
【Vue源码】虚拟DOM和diff算法
参考笔记:https://blog.csdn.net/weixin_44972008/article/details/115620198原创 2021-04-26 20:33:29 · 130 阅读 · 0 评论 -
vue 动态引用背景图片
<template> <div :class="['item','banner-bg-'+(index%3+1)]"> <div class="title">{{title(item.bannerName)}}</div> <div class="content">{{content(item.bannerName)}}</div> <div v-if="item.bannerUr原创 2021-03-22 17:09:04 · 239 阅读 · 0 评论 -
vuex学习
官方文档: https://vuex.vuejs.org/zh/1 vuex概述组件之间共享数据的方式父->子:v-bind子->父:v-on兄弟之间共享数据:EventBus只适用于小范围共享。vuex是一个状态管理模式,适用于多个组件共享同一状态时的场景,这里状态也可以理解为数据变量。使用vuex好处:能够在vuex中集中管理共享的数据,易于开发和后期维护能够高效地实现组件之间的数据共享,提高开发效率存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同原创 2021-03-15 10:36:10 · 65 阅读 · 0 评论 -
搜索关键词高亮
接口请求数据后返回的结果进行正则替换然后用v-html插入页面使用方法如下:html代码:<div class="doc-body-item-title"> <span class="doc-body-item-title-word" v-html="item.replaceFileName" @click="goDetails(item)"> </span></div><div class="doc-body-ite原创 2021-03-12 14:46:36 · 79 阅读 · 0 评论 -
echarts地图使用
echarts地图使用先安装ehcarts: npm install echarts --save-dev引入echarts引入china.js<template> <div class="box"> <div id="chart"></div> </div></template><script>import echarts from 'echarts';import c原创 2021-01-26 18:29:24 · 498 阅读 · 0 评论 -
vue&js 带有canvas的全屏和退出全屏
问题描述:因为canvas画布的高度和宽度是一开始固定写好的,当需要全屏时,画布的高度是开始定义的高度,就会出现屏幕下方黑了一块,如下图,所以我们需要判断是否全屏,画布根据这个属性改变画布高度。1.绑定resize事件,当浏览器窗口大小发生变化时判断是否全屏created() { this.isFullScreen = this.isFullscreen(); window.addEventListener('resize', () => { this.isFu.原创 2021-01-14 16:14:27 · 1471 阅读 · 0 评论 -
vue-router go(-1)拿不到参数问题
场景:页面三返回页面二,没有请求数据问题原因:发现页面三返回页面二没有走mounted, 所以没有请求数据页面二:解决方法:在页面二监听路由来请求参数原创 2020-12-16 16:16:06 · 671 阅读 · 1 评论 -
vue-introjs实现新手引导
https://www.jianshu.com/p/eae27be78384相关配置原创 2020-10-09 16:33:24 · 889 阅读 · 0 评论 -
ivew表格中render函数与tooltip:true冲突问题
https://blog.csdn.net/lgdaren/article/details/105116951这篇博客方法可行原创 2020-10-09 15:14:48 · 495 阅读 · 0 评论 -
双向绑定computed中数据问题
场景:在store中获取数据后,编辑时打开弹窗修改并提交上面由于直接从store中拿数据,并且在computed中,因此双向绑定失效,无法修改数据因为computed中无法直接修改数据于是我尝试在computed中写set和get方法也是失败告终。失败截图如下:解决办法:最好不要双向绑定computed中的数据于是在打开弹窗时获取数据并拷贝一份用来双向绑定,这样就可以修改了,完美解决。...原创 2020-08-12 15:44:16 · 1136 阅读 · 1 评论 -
vue报错 Cannot read property
场景:当前页面返回上一页面报错原因:在某组件中的data()函数写错错误写成是data(){}正确的写法是data(){return {}}原创 2020-05-25 14:56:35 · 873 阅读 · 0 评论 -
webpack从0开始搭建项目
在网上找教程:https://www.jianshu.com/p/7d3ff74d4b51跟着做了好几遍终于成功原创 2020-04-27 16:12:04 · 237 阅读 · 0 评论 -
文本超出宽度用省略号表示
css实现:单行文本多行文本显示省略号见博客:https://blog.csdn.net/zhumengzj/article/details/80801556vue用过滤器实现,超出指定字数显示省略号:原创 2020-04-27 09:53:13 · 194 阅读 · 0 评论