Vue
文章平均质量分 54
前端小码仔
学习如逆水行舟,不进则退
展开
-
前端实现语音播报(Vue2)
第一种是后端url 使用 Audio,第二种是前端自己拼接文字 window.speechSynthesis原创 2024-09-03 09:36:19 · 444 阅读 · 0 评论 -
Vue3 之 computed 属性,实现日历翻月份功能
日历翻月份功能原创 2024-07-18 21:21:04 · 278 阅读 · 0 评论 -
Vue的scrollBehavior(滚动行为)
Vue的scrollBehavior(滚动行为)原创 2023-01-13 11:45:35 · 4513 阅读 · 4 评论 -
Vue 路由懒加载-问题记录
使用过程中发现不用路由懒加载,刷新页面的时候 watch 监听 routes 并不会触发。一、微服务中使用懒加载: component: () => import(' ')解决方式:利用immediate:true ,触发 routes 执行。原创 2022-09-30 17:13:32 · 296 阅读 · 0 评论 -
Vue自定义指令获取当前this
// 自定义指令 directives:{ drag(el,binding,vnode) { // 函数里面第三个参数vnode 它的vnode.context就是当前的vm实例 constthat = vnode.context } }...原创 2021-07-26 16:12:43 · 842 阅读 · 0 评论 -
Vue 监听缓存事件(亲测有效)
摘要: 随着H5的更新,前端经常使用本地存储进行交互处理数据,如果想要监听缓存的变化,以下代码就是您想要的。一、在main创建缓存事件// 监听缓存事件Vue.prototype.$addStorageEvent = function(type, key, data) { if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent("StorageEv.原创 2021-05-07 21:59:30 · 3339 阅读 · 0 评论 -
前端路由原理及实现
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 hash 和 history,提供了原生JS/React/Vue 共计六个版本供参考,每个版本的实现代码约 25~40 行左右(含空行)。什么是前端路由?路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前.转载 2021-03-11 16:48:19 · 292 阅读 · 0 评论 -
vue seo解决方案
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说。1.SSR服务器渲染;2.静态化;3.预渲染prerender-spa-plugin;4.使用Phantomjs针对爬虫做处理。1.SSR服务器渲染关于服务器渲染:Vue官网介绍,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境。使用SSR权衡之处:开发条件所限,浏览器特定的代码,只能在某些生命周期钩子函数 (原创 2021-02-19 17:43:04 · 485 阅读 · 0 评论 -
iview table表格的自定义样式
https://www.pianshen.com/article/397535079/转载 2020-08-26 16:49:40 · 392 阅读 · 0 评论 -
Vue 中 slot 插槽的使用
<!-- slot.vue--> <!-- 通过name属性指定具名插槽,没有name属性的为默认插槽--> <slot name="header">我是header</slot> <slot name="main">我是main</slot> <slot :title="title" name="footer"></slot> <slot></slot>//.原创 2020-08-13 13:53:08 · 248 阅读 · 0 评论 -
Vue + iview + quill (vue-quill-editor)富文本编辑器及插入自定义图片,样式调整
最近公司又这么一个需求,在form表单中对这个富文本编辑器列有必填的长度校验,然而在项目中img会转成base64格式的导致检验失败,因此需要我们自定义图片功能来解决这个问题。原创 2020-07-24 14:19:04 · 1902 阅读 · 2 评论 -
IView textarea 右下角拖动功能bug
tips:最近遇到一个textarea拖动右下角的时候超出当前的容器的最大高度问题。解决方法:加上一个最大高度的样式限制,即可解决。原创 2020-07-22 10:45:01 · 395 阅读 · 0 评论 -
Vue watch使用及原理
场景:1、监听数据结构复杂的对象(deep) 2、需要初始化立即执行时调用(immediate) refModeIdData: { handler(n, o) { if (n.length === 1) { this.findProTypeCode(n[0]["code"]); } }, deep: true, // 监听数组时可以不写 immediate: true }原理:彻底理解.原创 2020-07-02 21:26:02 · 277 阅读 · 0 评论 -
微信公众号、H5微信支付(Vue版)
1.H5微信支付后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下)使用window.location.href =res.data;进行页面跳转到支付界面(res.data)为后台返回的链接,2.微信公众号支付为了唤起支付,首先这里需要我们做两件事,第一去配置jsapi域名,第二配置微信网页授权的回调域名,。构建微信授权的url :https://open.weixin.qq.com/connect/oauth2/authorize?app...原创 2020-06-09 21:10:12 · 514 阅读 · 0 评论 -
vm.$attrs 【Vue 2.4.0新增inheritAttrs,attrs详解】
描述:当我们组件嵌套层级多的时候,在Vue单向数据流向下传递需要不断的props又不想用vuex的情况下来实现数据传递1、首先我们来看下vue官方对vm.$attrs的介绍:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。猛一看有点看不明白....原创 2020-05-16 17:44:26 · 514 阅读 · 0 评论 -
Vue 实现滚动楼层导航定位(可实现监听页面滚动和监听某元素滚动)
实现思路:在vue中使用v-for动态渲染楼层和楼层导航,然后使用原生JavaScript实现楼层导航动态更新与楼层滚动定位1、页面初始化时定位首个楼层2、页面滚动楼层自动定位到相应的楼层导航并高亮显示3、鼠标点击楼层导航时,当前楼层导航高亮显示,并且页面自动滚动到相应的楼层效果页面布局 和 style .floor-nav { // positio...原创 2020-04-14 10:25:39 · 4635 阅读 · 0 评论 -
Vue el-scrollbar 单文件隐藏横向滚动条(亲测好用)
方法一:常规写法 会导致全局横向滚动条隐藏.el-scrollbar__wrap{overflow-x: hidden;}方法二:使用scoped 时候 ,使用deep/deep/ .el-scrollbar__view { overflow-x: hidden;}...原创 2020-01-03 18:26:43 · 1179 阅读 · 1 评论 -
vue中封装webSocket 进行数据实时通讯(亲测有效)
第一次在Vue项目中使用websocket,在网上搜索了很多如何在vue中使用的教程和示例:<template> <div class="test"> </div></template><script> export default { name : 'test', data() { ret...原创 2019-10-29 14:41:14 · 3331 阅读 · 0 评论 -
Vue v-html不能触发点击事件的问题(js交互),求助
背景:前端保存带有html和js的代码片段,在需要的地方后端返前端html格式的数据,前端用v-html解析渲染,标签能成功渲染(此时可以正常显示静态页面),但其绑定的事件无法触发。方案一:方案二:用了以上方法都不能实现,求做过的大神给予帮助!!!!...原创 2019-10-28 15:43:19 · 1650 阅读 · 0 评论 -
Vue 输入enter刷新页面问题(亲测好用)
问题分析: 当form表单中,只有一个输入框时,按Enter键,会导致表单提交,会刷新页面解决方案: 网上提供了在form上添加@submit.native.prevent发现容易出现不可预测问题最终找到: 在input元素上添加阻止默认表单提交事件 <el-form :inline="true" :model="project" class="demo-...原创 2019-09-11 14:39:48 · 554 阅读 · 0 评论 -
3、vue-cli3项目配置webpack自动删除生产环境的console.log调试信息,附带跨域解决
我们都知道项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的,但是我们在开发环境或者是测试环境有时候调试代码又需要打印输出一些信息,我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉,这个时候就需要我们在配置文件里面配置一下,生产环境编译的时候自动去掉console.log()。我们先看下vue-cli3文件结构,webpack相...原创 2019-07-17 15:46:47 · 1947 阅读 · 0 评论 -
2、vue 源码分析之如何实现 observer 和 watcher以及修改observer数据可能发生的问题
https://segmentfault.com/a/1190000004384515本文能帮你做什么? 。。好奇vue双向绑定的同学, 可以部分缓解好奇心 还可以帮你了解如何实现$watch前情回顾我之前写了一篇没什么干货的文章。。并且刨了一个大坑。。 今天。。打算来填一天。。并再刨一个。。哈哈 不过话说说回来了.看本文之前,, 如果不知道Object.defineProperty,...转载 2019-07-10 18:21:31 · 324 阅读 · 0 评论 -
1、Vue项目常用工具类-Untils
以下是项目中常用的工具类方法,大家可以收藏一下,方便日后使用。-----------------------------------------------------------------------------------------校验项-----------------------------------------------------------------------...原创 2019-06-22 14:52:10 · 3826 阅读 · 0 评论