vue中4个自定义指令讲解及实例用法

四个实用的vue自定义指令1、v-drag需求:鼠标拖动元素思路:元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left。
将可视区...

vue3基于script setup语法$refs的使用

目录一、vue2语法二、vue3使用1. 组件设置ref值
2. 组件实例获取
3. 子组件内设置对外公开的变量
一、vue2语法
vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs...

vue工程师必会封装的埋点指令思路知识总结

目录前言指令基础知识钩子函数钩子函数参数正文用法与思路实现加点通用性总结前言最近项目中需要做埋点功能,梳理下产品的埋点文档,发现点击埋点的场景比较多。因为使用的是阿...

React事件绑定详解

目录类组件事件绑定函数组件事件绑定总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}} 注意:React事件采用驼峰命...

JavaScript数据在不同页面的传递(URL参数获取)

        网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢?
今天,我们就来实战一下...

利用momentJs做一个倒计时组件(实例代码)

今天抽空给大家介绍下vue和moment做的一个倒计时,具体内容如下所示:展示样式:<template> <div class="table-right flex-a-center"> <div class="time-text">...

javascript七大数据类型详解

目录前言:详细介绍:练习:总结前言:各大语言都会有基本类型如python,java,c系列等,基本类型的存在是不可或缺的,它就好似我们生活中算数中的整数,汉字中的中文,它就是来表示这些...

详解JavaScript实现哈希表

目录一、哈希表原理二、哈希表的概念三、哈希化冲突问题1、链地址法2、开放地址法四、哈希函数的实现五、封装哈希表六、哈希表操作1、插入&修改操作2、获取操作3、删除操作...

HTML中用JS实现旋转的圣诞树

<!DOCTYPE HEML PUBLIC><html> <head> <meta charset="utf-8"> <title> From ZXW-NUDT </title> <style> body{text-align:center}...

uniapp调用百度语音实现录音转文字功能

经历三天时间各种遇到困难 之后终于实现了这个功能,参照网上了许多文章 才找到一个能正常实现的方法,网上能找到的例子都不起作用,相信很多人困惑在这,为了避免别人出现这种情况...

学习JavaScript一定要知道的3个小技巧

目录一、神奇的扩展运算符1.拷贝数组
2.合并数组
3.展开对象
二、进行空检查的最佳方法1.可选链操作符
2.空值合并运算符
三、使用 .map()、.reduce() 和 .filter()前言:通常...

JS利用 clip-path 实现动态区域裁剪功能

背景今天逛 CodePen,看到了这样一个非常有意思的效果:CodePen Demo -- Material Design Menu By Bennett Feely这个效果还是有一些值得探讨学习的点,下面我们一起来看看。如何...

JS实现简单的下雪特效示例详解

目录前言主要实现代码HTML代码JS代码前言很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果可以点击看...

localStorage过期时间设置的几种方法

目录问题描述1. 初级解法2. 中级解法3. 高级解法4. 骨灰级解法聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, cle...

JS循环中正确使用async、await的姿势分享

目录概览(循环方式 - 常用)声明遍历的数组和异步方法for 循环中使用map 中使用forEach 中使用filter 中使用附使用小结总结概览(循环方式 - 常用) for map forEach...

JSONP跨域模拟百度搜索

目录一、什么是JSONP二、JSONP跨域请求三、模拟百度搜索四、JSONP缺点一、什么是JSONP
JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后...

JS日期控件My97DatePicker基本用法

My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 1、下载My97DatePicker组件包 下载地址:https://www.jb51.net/jiaoben/18012.html2、在页面中引入该组件js...

JavaScript实现模态框拖拽效果

在这里做一个模态框拖曳的案例,在这里要实现的功能有:1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。...

JS一维数组转化为三维数组的实现示例

今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上,当然也没有顾及那么多去看资料什么的,就直接按...

JavaScript动画函数封装详解

目录一、动画函数原理二、动画函数简单封装三、 动画函数给不同元素记录不同定时器四、缓动效果原理五、 动画函数在多个目标值之间移动六、动画函数添加回调函数一、动画函...

vue3.0安装Element ui及矢量图使用方式

在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/inst...

详解angular中使用echarts地图

目录echart的初始化app-base-chart组件htmlcss使用app-base-chart组件总结在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了echart的初始...

Vue+ElementUI 实现分页功能-mysql数据

目录1.问题2.解决2.1分页组件2.2获取数据库数据的函数:getData():
2.3页面加载完成,需要请求第一页的数据3.分析4.结果1.问题
当数据库中数据比较多时,就要每次只查询一部分来...

javascript Blob对象实现文件下载

目录说明一、Blob对象二、前端三、后端总结说明最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需...

vue实际运用之vuex持久化详解

目录vuex持久化总结vuex持久化vuex:刷新浏览器,vuex中的state会重新变为初始状态解决办法:使用vuex-persistedstate插件 (实际就是自动存在本地存储中) 安装 npm i -S vuex-pe...

Vue顶部tags浏览历史的实现

目录废话实现的功能正文重点废话demo预览实现的功能默认有首页,不能关闭点击路由菜单,判断有无存在,没有就添加,有就定位到上面点击跳转,点击X可关闭关闭当前页,自动跳到下一个tag...

Vue3+Element+Ts实现表单的基础搜索重置等功能

从Vue2的写法转变为Vue3的格式之后,会有一些写法和代码结构的改变,这里对一些重点进行介绍。代码结构:写法一(推荐):<script setup lang="ts">import { ref, reactive } from 'v...

vue3.0项目快速搭建的完整步骤记录

目录一、我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0二、通过vue/cli3创建我们的第一个项目RouterCSS 预编译ESLint 语法校验运行项目升级vue三、vue3.0相比vue2.0...

angular内容投影详解

目录单内容投影多内容投影单个条件的内容投影app-persons - htmlapp-persons - ts使用效果图多个条件内容投影appChildRef 调整app-persons - htmlapp-persons - ts使用效果...

解析OpenLayers 3加载矢量地图源的问题

一、矢量地图矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得,所...

Vue学习-VueRouter路由基础

目录一、VueRouter1、说明2、选中路由的渲染:
3、基本工作原理二、实战1、创建一个带router的vue项目2、打开项目中的src/router/index.js文件
3、在浏览器中打开项目
4、新...

Javascript File和Blob详解

目录File()语法参数示例Blob()语法参数属性方法示例总结File()File() 构造器创建新的 File 对象实例。语法var myFile = new File(bits, name[, options]);参数bits
一个包...

vue 按钮 权限控制介绍

目录一、步骤1.定义buttom权限
2.定义store
3.创建permission指令
4.使用permission指令
5.删除无权限数据
6.传入状态管理数据
二、概况前言:
在日常项目中,会碰到需要根据后...

vue-amap安装和用法步骤

之前分享了异步加载高德地图api的用法,现在记录一下vue-amap的用法。vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定,开发者无...

vue中插件和组件的区别点及用法总结

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。一、组件是什么
回顾以前对组件的定义:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式...

vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求。
借鉴其他项目,以及网上功能加以组合调整实现
按照标签实现方式步骤来(大致思路):
1,写一个tagNav标签组件2,在路由...

JavaScript实现动态生成表格案例详解

目录前言实现思路实现代码 实现效果前言在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。...

angular双向绑定详解

目录双向绑定原理ngModel效果图自定义双向绑定属性组件-html组件-ts外部使用效果图总结双向绑定原理双向绑定将属性绑定与事件绑定结合在一起。
Angular 的双向绑定语法是方...

关于Vue的 Vuex的4个辅助函数

目录一、辅助函数二、实例1、mapState 和 mapGetters
2、mapMutations和mapActions
一、辅助函数
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和...

Vue实现模糊查询-Mysql数据库数据

目录1.需求2.实现3.结果1.需求
输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询。2.实现
输入框使用v-model双向绑定查询数据keyWord。<el-input v-mode...

element用脚本自动化构建新组件的实现示例

目录背景element-ui的自动化构建是怎么做的makefile
new.js
file-save
引用资源文件的修改fs.createWriteStream
总结背景
在公司的项目中,每次碰到新需求的时候,你是不是都还...

JavaScript 微任务和宏任务讲解

前言:
js是一门单线程语言,所以它本身是不可能异步的,但是js的宿主环境(比如浏览器、node)是多线程,宿主环境通过某种方式(事件驱动)使得js具备了异步的属性。而在js中,我们一般将所...

基于JS实现页面悬浮框的实例代码

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.<!DOCTYPE html> <html> <head...

JavaScript的Proxy对象详解

目录一、Proxy 是什么?二、怎么用?1、使用 Proxy 的简单实例2、目标对象被正确修改3、使用 set handler 做数据验证4、扩展构造函数总结一、Proxy 是什么?Proxy 对象用于拦截并...

JavaScript实现一个简单的圣诞游戏

目录前言实现效果代码CSS代码JS代码html代码演示流程前言圣诞节快来了,热榜都被一堆圣诞树攻占了,这样的流量密码我怎么会错过,大家都发圣诞树,我就不发啦,直接分享一个圣诞小游...

JavaScript实现三种常用网页特效(offset、client、scroll系列)

目录一、元素偏移量 offset 系列二、元素可视区 client 系列三、元素滚动 scroll 系列一、元素偏移量 offset 系列offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性...

angular父子组件通信详解

目录用到的api简单的例子person.ts父组件子组件效果总结用到的apiInput - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据Output - 子组件中定义输出的属性,该属性...

vue中插槽整理及用法分析

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。vue的插槽(slot)主要分三种:默认插槽,具名插槽,作用域插槽vue中的插槽,指的是子组件中提供给父组件使用的一个占位符;
用标签...

分享20个JavaScript 单行代码

目录1.获取浏览器Cookie的值2.将RGB转换为十六进制3.复制到剪贴板4.检查日期是否有效5.查找一年中的某一天6.大写字符串7.查找两个日期之间的天数8.清除所有Cookie9.生成随...

JavaScript中的异步能省掉await吗?

之前我知道要在JavaScript中同步获取异步执行的结果,必须带await;在for循环中,如果不用Promise.All的话,异步不起效果。但是每次需要等待执行结果的时候,都需要带async和await,我...

返回顶部
顶部