- 博客(124)
- 收藏
- 关注
RSS订阅
原创 vue使用自定义指令实现一键复制
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
2024-09-09 11:08:24
783
原创 js深度解构
深度解构（Deep Destructuring）是指在解构赋值中，解构对象或数组中的嵌套结构。它允许你从复杂的数据结构中直接提取所需的嵌套数据，使代码更加简洁明了。
2024-08-12 17:51:29
460
原创 css实现磨砂效果（filter 与 backdrop-filter 的对比分析）
在 CSS 中实现磨砂效果（类似于 iOS 的磨砂玻璃效果）通常结合使用 backdrop-filter 属性和半透明的背景色。</</</
2024-08-10 14:29:40
774
原创 在 Nginx 上部署项目
购买服务器,设置安全组,开放默认端口，这样才能访问服务器。配置nginx,nginx用于反向代理,a.访问地址可以找到前端项目;b.让前端项目部署的服务器可以向后端服务器发送请求得到数据。
2024-08-01 13:53:28
264
原创 Vue Router哈希模式和历史模式
SEO（Search Engine Optimization，搜索引擎优化）是一系列提高网站在搜索引擎中自然排名的策略和技术。SEO 的目标是通过优化网站内容和结构，使其在搜索引擎结果页面（SERP）中的排名更高，从而吸引更多的有针对性的自然流量。路径的变化会更新浏览器的地址栏，但不会重新加载页面，客户端脚本（如 Vue Router）处理路径变化。浏览器在哈希值发生变化时不会重新加载页面，只会触发 hashchange 事件，客户端脚本（如 Vue Router）可以捕捉并处理这个事件来进行导航。
2024-08-01 13:22:59
409
原创 防抖和节流
在 Vue 项目中实现防抖（debounce）和节流（throttle）是处理频繁触发事件（如输入框的输入、窗口的缩放、滚动、按钮的点击等）时常用的技巧。这些技巧有助于提高应用的性能和用户体验。
2024-07-31 23:57:36
577
原创 vue图片存放在public目录和src/assets目录下的区别
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
2024-07-19 14:16:29
826
原创 VUE为什么不建议v-for和v-if一起使用
在vue3中，是因为当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。因为两者的优先级不一样，v-for 的优先级比 v-if 高，如果一起使用，每次渲染时都会先循环再进行条件判断，先循环再做判断会造成性能浪费，使用过程中不要把它们放在同一个元素上。
2024-07-11 10:19:27
471
原创 element-ui 下拉菜单el-dropdown-item添加点击事件
native修饰符用于处理DOM原生事件，由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。使用element-ui下拉菜单组件Dropdown时绑定点击事件，事件不生效。
2024-06-25 23:03:52
1245
原创 vuex的actions返回结果类型是promise及actions方法互相调用
this.$store.dispatch(‘logout’)返回的结果是Promise类型的调用成功的情况下，返回状态为fulfilled，值为undefined。因为 Vuex 的 action 是设计为可以处理异步操作的，并且当你调用 dispatch 方法时，它会返回一个表示该操作完成的 Promise。
2024-06-25 21:07:35
348
原创 vuex数据持久化
刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。使用localStorage或sessionStorage将vuex存储的数据直接存储在本地。本质上是自动存储在localStorage或sessionStorage中。
2024-06-25 20:15:18
505
原创 解决 vue 项目一直出现 sockjs-node/info?t=问题
其实如果是在开发环境，应该是开发的时候网络环境变更导致，比如你切换无线网络，导致开发服务器的IP地址换了，这样开发服务器会不知道如何确定访问源。开发环境中关闭npm dev server，然后重新npm run serve重新构建服务环境就可以了。如果是生产环境，很大可能是应该是域名和ip映射出问题，重启node，检查重新配置域名和ip映射就可以了。如果直接更改/node_modules/sockjs-client/dist/sockjs.js 文件，则会关闭热加载。
2024-06-25 01:47:28
953
1
原创 .sync 修饰符
在 Vue.js 中，.sync 修饰符是一种用于双向绑定子组件和父组件之间的属性的语法糖。它简化了父组件更新子组件的属性以及子组件通知父组件属性变化的过程。
2024-06-25 01:45:07
412
原创 el-form重置后input无法输入问题
是在重置前的formdata的基础上进行的，重置前的formdata与初始化进行比较，将初始化的属性和属性值赋值到现在的formdata中，而方法不会赋值过来，这也就是password为什么没有响应式的原因。在打开dialog直接点击重置后，我们再往password的input中输入，发现会无法输入，这是因为此时password不具有响应式，是新添加的属性。这就导致了在重置时，由于formdata的初始值设置中是有password，所以在重置后，formdata的结构如下。formdata会变成如下。
2024-06-25 00:16:15
1200
1
原创 JSON.parse(JSON.stringify())导致的响应式属性丢失
【代码】JSON.parse(JSON.stringify())导致的响应式属性丢失。
2024-06-24 22:51:44
328
原创 解决el-form、el-dialog、数据回显同时用时，重置失效问题
先调用修改回显再调用新增 this.$ref[‘form’] .resetFields()无法重置表单项数据回显（Data Echoing）指的是将数据重新显示在用户界面上的过程，通常用于在用户提交表单后，或从服务器获取数据后，将数据填充回表单或展示在页面上。element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。
2024-06-24 19:38:16
533
原创 async和await
async 函数的返回值始终是一个 Promise 对象。在这个示例中，example1 函数返回字符串 ‘Hello, world!’，但是由于它是一个 async 函数，这个返回值会被封装在一个解决的 Promise 中。在上面的代码中，批量删除时，await失效，直接打印“1”，由于在执行 deleteContent函数时，MessageBox.confirm 是一个异步函数，并且没有等待其执行完毕，就直接结束了deleteContent函数，函数会返回一个值为undefined的Promise。
2024-06-24 14:11:03
1166
原创 项目运行端口号和代理服务器端口号一致却不冲突的原因
一个端口只能运行一个程序狭义理解起来没错，如果你不弄代理，这个端口就被你的Vue/React占用直接本地返回给你静态网页，如果你用了代理服务器，他就会在这个请求基础上跑一个本地服务器，发起代理跨域请求然后把响应传回来。启动一个服务监听一个端口，这个服务既提供静态文件（react/vue代码）给浏览器，也提供接口代理（代理服务器）。
2024-03-21 19:32:25
200
原创 vue构建版本
当使用Webpack的vue-loader时，*.vue 文件中的模板会在构建时预编译为JavaScript，在最终的捆绑包中并不需要编译器，因此可以只使用运行时构建版本。vue.common.js 是 Vue.js 的一个构建版本，它主要用于在 CommonJS 环境中使用，可以在 Node.js环境中使用 Vue.js 来构建服务端渲染的应用程序，或者在使用一些构建工具如 Browserify 的情况下，在浏览器中使用CommonJS 模块加载 Vue.js。完整版：同时包含编译器和运行时的版本。
2024-02-29 18:53:45
543
原创 npm安装命令
将包安装到 node_modules 目录，npm install 初始化时会自动下载模块，运行 npm install --production 或者 NODE_ENV 变量值为 production 时，不会下载模块到 node_modules 目录中，会将依赖写入 package.json 文件 的 devDependencies 节点。全局安装，不会在 node_modules 目录中保存，npm install 初始化时不会自动下载模块，不会修改 package.json 文件。
2024-02-06 14:03:00
1221
原创 el-form验证问题
el-form 的 model 是 formData，那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 formData.xxx ，即 formData 对象的直接属性。需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。
2024-01-13 23:21:05
764
原创 refs传值
异步任务可以直接实现，父组件通过ref修改子组件的formdata1，因为异步任务返回结果后，会对formdata1进行数据更新，所以组件重新渲染且显示正常。在子组件中定义好formdata中的属性，并且如何在父组件中更改的不是下面两个属性，则仍然不会触发子组件重新渲染。则会出现属性undefined，因为此时子组件并没有渲染，还没有formdata1属性。当子组件中要改变的变量formdata1是空对象，则在父组件中。进行上面形式的赋值，并不会触发子组件的重新渲染。调用子组件的函数也是采用上面的方法。
2024-01-12 23:50:21
437
原创 props传值问题
tableData要设置为null或者undefined，或者v-if更改条件，在渲染子组件的时候加上一个条件，当有数据的时候在去渲染子组件。在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。按上面的方法会出现versionNumber等属性undefined，这是因为在父组件调用接口传递数据给子组件时，接口响应显然是异步的。在子组件中添加watch监听, 父组件获取到值得时候, 就会触发watch监听, 从而实现重新渲染子组件。
2024-01-12 20:12:05
411
原创 vue父子组件生命周期执行顺序
一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。在使用v-router时有时需要使用keep-alive来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子调用。此时 Vue 实例中的数据是最新的了，但是页面中的数据还是旧的，可以在此时进一步更改数据，而不会造成重新渲染。实例仍然完全可以使用。
2024-01-11 23:34:10
796
原创 el-dialog中使用el-form子组件传数据问题
需求：在父组件中点击后显示el-dialog，el-dialog中使用了子组件，并需要向子组件传form数据。
2024-01-11 16:10:18
602
原创 vue修改组件样式
在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。一个组件需要在很多地方使用，但是其中某个子组件的css需要改变，可以使用deep更改组件中的css，需要加上scoped，来进行隔离，最外层的标签可以直接进行修改。
2024-01-07 15:27:30
710
原创 el-form点击提交后把验证失败的数据传给了后端
问题：版本号需要根据后端返回的结果查看是否可用，在这里1.0.0是不可用的，如果点击其他地方则会报红，可是直接点击提交，则会把1.0.0这个错误的数据也提交给后端。在提交按钮绑定的点击事件中使用validate去查看验证是否正确，正确则进行传输。
2024-01-06 21:30:15
741
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人