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">
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
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中的计算属性和属性侦听
目录
1. 计算属性
语法: 1.简写方式:
语法: 2.完整写法:
2. 监视（侦听）属性
1. 监视属性watch：
2. 深度监视
3. 区别和原则
总结
1. 计算属性
定义
计算属性：要用的属性不存在，要通过已有属性计算得来，计算属性要有一个全新的配置项computed
对Vue来说，data里面的数据就是属性，只要Vue中的数据改变，就会重新解析模板，遇到插值语法里的方法会重新调用
2021-10-05
55
Vue鼠标滚轮滚动切换路由效果的实现方法
一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件)
在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听
当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听
Vue路由切换过渡
vue的过渡
<transition :name="transitionName">
<div></div>
</transition>
使用transition 包
2021-08-04
81
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
