JBL T280TWS X 真无线蓝牙耳机 入耳式防水防汗音乐运动跑步耳机 通话降噪耳机
Vue自定义铃声提示音组件的实现
目录 背景/前言 组件的使用 安装 加载 组件生效 组件参数 使用默认音效 关于open参数的解释 项目地址 背景/前言 之前的一个功能需求,需要在页面接收消息,一旦有了新消息之后,需要用铃声进行提醒。 因为没有找到类似的比较便捷的组件,所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件,发布出去让其他开发者也用用?于是就试着写了一个项目(项目地址在最后),发布成了npm包。 目前这个组件已经发布到了npm上,欢迎大家试用。如果有好的建
2022-01-22 5
Vue提供的三种调试方式你知道吗
目录 一、在 VS Code 中配置调试 二、debugger语句 三、Vue Devtools 总结 一、在 VS Code 中配置调试 使用 Vue CLI 2搭建项目时: 更新 config/index.js 内的 devtool property: devtool: 'source-map', 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图: 选择Chrome/Firefox:Launch 环境。将 launch.json 的内容替换为: {
2022-01-18 6
详解Vue项目的打包方式(生成dist文件)
目录 一、相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack)  二、打包  一、相关配置 情况一(使用的工具是 vue-cil)         如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件;在根目录 sr
2022-01-18 6
Element-ui Layout布局(Row和Col组件)的实现
目录 基本说明以及用法 Row组件的分析 render函数 源码分析 Col组件的分析 组件分析 响应式布局 我们在实际开发中遇到一些布局的时候会用到Layout布局,这个布局只要配置一些参数就能够达到很好的布局效果甚至可以响应式,那里面的具体是怎么实现的呢,让我们去剖开Element-UI的源码,学习里面的一些细节吧。 基本说明以及用法 Element-UI的Layout布局是通过基础的24分栏,迅速简便地创建布局。根据不同的组合,很快的就能够生成一个很美观的响应式布局。具
2021-12-06 66
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
前言  Excel功能强大,应用广泛。随着web应用的兴起和完善,用户的要求也越来越高。很多Excel的功能都搬到了sass里面。恨不得给他们做个Excel出来。。。程序员太难了。。。   去年我遇到了一个甘特图的需求,做了很多工作,也写了两篇博客。一篇是用 GSTC 这个包做的甘特图,另一篇是自己手写了一个简易的甘特图。两个的效果都不理想,特别是GSTC,问题很多,好多道友看了博客遇到了问题,惭愧,没能帮大家解决这个问题。之前太忙了,这个甘特图就再没搞,直到今天发现了新的包,几乎是完全符合我们的需求。   首先,我们用的是 highcharts;其次,大团队的产品,后期维护
2021-11-27 39
Vue实现跑马灯样式文字横向滚动
本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1、可以自己封装一个组件,也可以自己写,也可以复制以下代码 2、封装完成以后要在所需的组件中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"&g
2021-11-23 26
详解Vue的列表渲染
目录 1. v-for:遍历数组内容(常用) 2. v-for:遍历对象属性(常用) 3.遍历字符串(不常用) 4.遍历指定次数(不常用) 5.key 的作用和原理 1.虚拟DOM中key的作用: 2.对比规则: 3.用index作为key可能会引发的问题: 4.开发中如何选择key? 总结 1. v-for:遍历数组内容(常用) in 也可以用 of 代替 <body> <div id="div1"&gt
2021-11-20 19
详解Vue slot插槽
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件(传的是HTML格式)。 父组件App: 子组件Category: 在父组件或者子组件里都可以给插槽中的内容设置样式,效果一样 作用域插槽: 1.理解:数据在组件的自身(Category),但根据数据生成的结构需要组件的使用者(APP)来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定) 子组件在给父组件传数据 子: 父: 使用atguigu这样一个对象接
2021-11-20 9
详解Vue router路由
目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数  7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用   2.几个注意点   3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻
2021-11-20 7
vue中 this.$set的使用详解
目录 vue中 this.$set的使用 使用 为什么能够响应式? 分析 总结 vue中 this.$set的使用 背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面上了。但是由于我自己的需求,想往返回的对象里面添加一个字段,于是我用push一个字段进去,添加是添加进去了,但是页面渲染却没有变化。后来才意识到不是响应式的。如果我们要让这个新字段是响应式的,就要使用到this.$set来注入数据 当vue的data里边声明或者已经
2021-11-17 37
如何用vue实现网页截图你知道吗
目录 1、安装html2Canvas 2、在需要的vue组件中引入 3、编写一个截图按钮 4、调用函数toImage 总结 1、安装html2Canvas npm install html2canvas --save 2、在需要的vue组件中引入 import html2canvas from "html2canvas"; 3、编写一个截图按钮 <el-button class="button-dalod" size="mini" title="生成图片" @clic
2021-11-17 76
Vue3中的Refs和Ref详情
小编同样和大家分享关于Vue3中的数据相应的问题,下面我们来例举一个这样的例子 Vue.createApp({ template: `<div>{{ nameObj.name }}</div>`, setup() { const { reactive } = Vue const nameObj = reactive({name:'lilei',age:18}) setTimeout(() => {
2021-11-11 46
详细聊聊vue中组件的props属性
目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看  问题二:那如果我们想给年龄加1岁,怎么实现?  问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?  问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗?  问题六:必须要修改props属性值,怎么办?  总结:配置项props 总结 今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是
2021-11-02 59
一定要知道的 25 个 Vue 技巧
目录 1. 将 prop 限制为类型列表 2. 默认内容和扩展点 3. 使用引号观察嵌套值 4. 知道何时使用 v-if(以及何时避免使用) 5. 单作用域 slot 的简写(不需要模板标签!) 6. 有条件地渲染slot 6.1 为什么我们希望能够有条件地渲染slot呢? 7. 如何观察slot的变化 8. 将本地和全局风格混合在一起 9. 覆盖子组件的样式——正确的方法 10. 用上下文感知组件创造魔法 10.1 状态共享 10.2 配置
2021-11-02 48
简单聊聊Vue中的计算属性和属性侦听
目录 1. 计算属性 语法:  1.简写方式: 语法:  2.完整写法: 2. 监视(侦听)属性 1. 监视属性watch: 2. 深度监视 3. 区别和原则 总结 1. 计算属性 定义 计算属性:要用的属性不存在,要通过已有属性计算得来,计算属性要有一个全新的配置项computed 对Vue来说,data里面的数据就是属性,只要Vue中的数据改变,就会重新解析模板,遇到插值语法里的方法会重新调用
2021-10-05 55
SSM VUE Axios详解
目录 如何展示Sql日志?? SpringMVC里参数传递的说明 restful 语法: 用户规范: 参数接收: MyBatis简化sql的注解 前后端调用 1.Vue入门案例 2.Vue生命周期 概念 种类(③+⑧) 3.前后端调用 Axios Ajax 案例一: 案例二:通过?属性=属性值的方法拼接 案例三:通过对象的方式实现数据传递 总结 如何展
2021-10-05 74
vue使用Google Recaptcha验证的实现示例
我们最近的项目中需要使用谷歌机器人验证,这个最主要的就是要有vpn,还需要有公司申请的google账号(自己申请的没用)用于商用的,利用这个账号去申请秘钥,然后有了秘钥之后就可以了。 部分代码如下: 1.首先正是我封装的google机器人验证组件: <template> <div ref="grecaptcha"> </div> <!-- <div id="robot"></div> --&am
2021-08-23 108
Vue鼠标滚轮滚动切换路由效果的实现方法
一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡 <transition :name="transitionName"> <div></div> </transition> 使用transition 包
2021-08-04 81
Vue3.0 手写放大镜效果
需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。   鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动  在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>Hello world</h1> <
2021-07-25 133
vue项目多环境配置(.env)的实现
目录 什么是多环境配置,为什么要多环境配置? .env 文件配置到哪里 .env文件如何配置,配置多少个? .env文件的配置 如何配置运行环境 如何获取全局配置项的值 如何运行环境 没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位大佬指出。 什么是多环境配置,为什么要多环境配置? 最常见的多环境配置,就是开发环境配置,和生产环境配置(也就是上线的配置),很多情况下我们开发环境下的域名,和一些配置项,和我们生产模式下的不同,这个时候就需要我们进行多
2021-07-21 158
Vue Element-ui表单校验规则实现
目录 1、前言 2、规则校验的入门模式 2.1、示例代码 2.2、form项 2.3、prop项 2.4、rules项 2.5、rule项 2.6、使用规则 2.7、规则校验的核心 3、规则校验的进阶模式 3.1、嵌套对象属性名 3.2、自定义校验器validator 3.3、类型type 3.3、数据转换transform 3.4、数值范围Range 3.5、枚举值 3.6、正则Pattern 3.7、长度len 3.8、空白whitespace
2021-07-09 103