<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Hello_MrShu的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Hello_MrShu</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Hello_MrShu]]></copyright><item><title><![CDATA[el-form表单点击回车浏览器刷新，回车提交问题]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/152131673</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/152131673</guid><author>Hello_MrShu</author><pubDate>Fri, 26 Sep 2025 18:50:57 +0800</pubDate><description><![CDATA[你听我跟你说，W3C有两条规定：规定一：当一个form元素中只有一个输入框时，在该输入框中按下回车，会提交该form表单。规定二：当一个form元素中只有一个button（原生的button）时，即使不绑定事件，点击该button也会提交表单。]]></description><category></category></item><item><title><![CDATA[vue3+codemirror6实现代码编辑，包含JSON格式校验（实战）]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/151621885</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/151621885</guid><author>Hello_MrShu</author><pubDate>Fri, 12 Sep 2025 17:45:54 +0800</pubDate><description><![CDATA[本文介绍了如何在Vue3中使用CodeMirror6实现带JSON校验功能的代码编辑器。主要内容包括：安装核心依赖包（codemirror、json语言支持、lint校验等）、配置编辑器模板、初始化编辑器实例、自定义JSON校验逻辑（包括错误捕获和显示）。文章重点讲解了linter和lintGutter的配合使用，提供了获取/设置编辑器内容的方法，并指出CodeMirror6与Vue2版本的主要区别在于需要编程式创建编辑器而非使用组件标签。最后给出了JSON校验的特殊处理方法和编辑器内容操作示例。]]></description><category></category></item><item><title><![CDATA[position:absolute绝对定位与border-box父元素内边框关系]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127428559</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127428559</guid><author>Hello_MrShu</author><pubDate>Thu, 20 Oct 2022 19:14:49 +0800</pubDate><description><![CDATA[absolute定位相对于已定位父级内边框，不管父级的 box-sizing 是 border-box 还是 content-box。虽然子级 position:absolute 脱离了正常的文档流，但是因为父级是 position:relative，所以子级和父级之间的关系还在。而父级盒模型的特点，使子级在定位的时候是以边框内为标准的。至于父级是不是border-box，那与子级定位无关，因为那是父级在整个文档布局时的宽高属性。]]></description><category></category></item><item><title><![CDATA[vue组件通信方式之eventBus]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127370046</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127370046</guid><author>Hello_MrShu</author><pubDate>Mon, 17 Oct 2022 18:18:34 +0800</pubDate><description><![CDATA[父子通信，通常父组件向子组件通过props传值，子组件通过使用$emit向父组件传参，还有诸如 $parent ,$children, $refs 等直接获取组件的方法。兄弟组件，或者没有直接联系的组件之间进行通信时就会比较麻烦，比较常用的就是vuex等状态管理工具。此时，我们还有一个简单的方法那就是vue事件总线（eventBus）绑定前不解绑的话，主要有两方面的问题：1、事件反复触发；2、内存泄漏；$on;$off ;内存泄漏（闭包）]]></description><category></category></item><item><title><![CDATA[vue过滤器filter的使用]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127363940</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127363940</guid><author>Hello_MrShu</author><pubDate>Mon, 17 Oct 2022 16:50:20 +0800</pubDate><description><![CDATA[vue允许自定义过滤器，我们通常用于对文本进行格式化一类的操作。vue项目中创建全局过滤器：在main.js中注册全局过滤器，且必须放在vue实例创建之前。然后才可以在各个组件中使用。局部过滤器;多个过滤器串联;过滤器添加参数;过滤器 this 指向问题;]]></description><category></category></item><item><title><![CDATA[vue2.0对象添加新的属性方法$set、object.assign()]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127320131</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127320131</guid><author>Hello_MrShu</author><pubDate>Fri, 14 Oct 2022 15:38:27 +0800</pubDate><description><![CDATA[我们都知道，vue2.0的双向数据绑定是利⽤Object.defineProperty()来劫持各个属性的setter和getter，在数据变化时，发布消息给订阅者，从而触发相应的监听回调。vue.$set()，它可以手动的把 obj.age 处理成响应式属性，这样，视图就可以更新了。Object.assign(target, obj1, obj2) 合并对象数组中如果使用 index 来修改某一项，如 this.arr[3] = 'lisi' 这同样不是响应式的；也可以使用 set方法]]></description><category></category></item><item><title><![CDATA[element UI组件添加自定义参数]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127305034</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127305034</guid><author>Hello_MrShu</author><pubDate>Thu, 13 Oct 2022 17:26:38 +0800</pubDate><description><![CDATA[该组件change事件回调参数有两个：currentValue 和 oldValue；我们在使用elmentUI组件时，使用额外的方法，来给组件添加自定义参数。]]></description><category></category></item><item><title><![CDATA[v-if 切换 el-tabs 加载 ECharts 错误问题（二）]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111802</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111802</guid><author>Hello_MrShu</author><pubDate>Thu, 29 Sep 2022 18:35:04 +0800</pubDate><description><![CDATA[vue项目在使用elementUI的el-tabs组件时，通过v-if切换两个tabs，当tabsA和tabsB中有相同name的tab时会报错：Duplicate keys detected: 'tab-xxx'. This may cause an update error.]]></description><category></category></item><item><title><![CDATA[v-if 切换 el-tabs 加载 ECharts 错误问题（一）]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111666</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111666</guid><author>Hello_MrShu</author><pubDate>Thu, 29 Sep 2022 18:14:34 +0800</pubDate><description><![CDATA[在vue项目中使用了 echarts 和 elementUI 的 el-tabs 组件；在同一个页面点击按钮，通过v-if切换加载两个不同的 tabs（tabsA和tabsB）；当从tabsA切换到tabsB时，div的大小变化了，但是div里面的Echarts图，数据变化了，图表的大小却还是切换之前的大小。审查元素发现，dom元素貌似没有销毁，这与之前发现的 v-if 切换相同元素，造成的局部编译有关。在同一个dom中画多个实例时，需要销毁前一个，再画后一个。]]></description><category></category></item><item><title><![CDATA[vue scoped和scoped穿透]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111486</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127111486</guid><author>Hello_MrShu</author><pubDate>Thu, 29 Sep 2022 18:02:43 +0800</pubDate><description><![CDATA[vue文件中的style标签上会有一个特殊属性scoped。当一个style标签拥有scoped属性时，他的css样式只能作用于当前的vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加了scoped属性，相当于完成了样式的模块化。]]></description><category></category></item><item><title><![CDATA[vue.nextTick的作用]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127110396</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127110396</guid><author>Hello_MrShu</author><pubDate>Thu, 29 Sep 2022 17:37:32 +0800</pubDate><description><![CDATA[我们在项目中有时会遇到需要获取dom的情况，比如echarts。在下次DOM更新循环结束之后执行延迟回调，这就是nextTick，控制台console结果js和jq的不一致]]></description><category></category></item><item><title><![CDATA[v-if 和 v-show 的区别以及 v-if 局部编译/卸载问题]]></title><link>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127107857</link><guid>https://blog.youkuaiyun.com/Hello_MrShu/article/details/127107857</guid><author>Hello_MrShu</author><pubDate>Thu, 29 Sep 2022 16:37:18 +0800</pubDate><description><![CDATA[区别：v-ifv-show手段是通过控制dom节点的存在与否来控制元素的显隐；是通过设置DOM元素的display样式，block为显示，none为隐藏；编译过程切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；只是简单的基于css切换；编译条件是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载);是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；]]></description><category></category></item></channel></rss>