经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

vue3单文件组件中style特性的深入讲解

目录style scoped style module 状态驱动的动态c 总结 style scoped 需要注意的有: 样式不会影响到其他组件,只会在当前组件生效。 子组件的根元素会同时 受父组件的作用域样式,和子组件的作用域样式影响. 这样做的目的是让父组件可以...[2021/9/6]

vue实现内容可滚动的弹窗效果

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码,供大家参考,具体内容如下 这是第一种实现方式 效果图: 弹窗代码: Popup.vue <template lang="html"> <div v-if="show" cla ...[2021/9/6]

vue使用rules实现表单字段验证

vue使用rules实现表单字段验证

vue中表单字段验证的写法和方式有多种,本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesFor...[2021/8/26]

vue配置文件自动生成路由和菜单实例代码

vue配置文件自动生成路由和菜单实例代码

目录写在前面 router.json路由生成菜单生成效果总结 写在前面 每次重复写路由的时候是不是会觉得很烦,特别是项目大的时候,路由会有特别多,看都看不过来,所以这里我是有了一个router.json的配置文件来对路由做一些简单的配置,然后让路由和左侧菜单栏可以同时生成。 rou...[2021/8/16]

vue 防止多次点击的实践

一般点击事件会分不同的情况进行消息提醒,如果不做处理,短短几秒弹出很多条提示信息,就会很烦,比如: 那要怎么控制这个提示信息只能出现单条呢 再点击事件的方法最前面加上 定义变量hasRemind来控制是否执行点击事件里的相应操作 当用户第一次点击的时候,hasRemind =...[2021/8/9]

Vue+tsx使用slot没有被替换的问题

目录前言发现问题解决后记 前言 最近自己准备写一个 UI 组件,想对 vue 的 2.x、3.x 可以更深层次的掌握 在架构时,准备全部使用 tsx 书写组件 但遇到了 tsx 中使用 slot 的问题 发现问题 先写了一个基础的 card 组件: card.tsx: ...[2021/8/9]

vue中防抖和节流的使用方法

目录前言概念防抖 定义使用场景代码 在vue中使用 节流 定义使用场景代码 在vue中使用 总结 前言 在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据。 这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一...[2021/8/5]

vue.js中methods watch和computed的区别示例详解

目录前言介绍一、作用机制上二、从性质上三、watch和computed的对比四、methods不处理数据逻辑关系,只提供可调用的函数五、从功能的互补上看待methods,watch和computed的关系六、利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 compute...[2021/8/5]

vue.js管理后台table组件封装的方法

目录问题分析 为什么封装 封装的内容都有哪些 封装table组件 确认数据格式 封装组件 封装全局组件 table组件封装 分页组件封装 数据定义 封装 总结 最近开了新的项目,简单说了自己的table封装。 问题分析 为什么封装 首先为什么封装,是因为追求技术吗,不,是因为懒,...[2021/8/5]

vue使用GraphVis开发无限拓展的关系图谱的实现

1、去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http: www.graphvis.cn/) visgraph.min.js (基本配置js) visgraph-layout.min.js(配置布局...[2021/8/5]

Vue生产和开发环境如何切换及过滤器的使用

目录一、生产环境,开发环境切换 第一种方法:通过配置.env文件来实现 第二种方法 二、过滤器 三、moment时间库使用 一、生产环境,开发环境切换 开发环境:开发环境就是在 /config/index.js下配置proxyTable 生产环境:打包项目后代理就失效啦,所以再生产环境下...[2021/8/5]

vue实现简易计时器组件

在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识。 window对象提供了两个方法来实现定...[2021/8/5]

Vue3异步数据加载组件suspense的使用方法

Vue3异步数据加载组件suspense的使用方法

目录前言创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档。 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照...[2021/8/5]

Vue鼠标滚轮滚动切换路由效果的实现方法

Vue鼠标滚轮滚动切换路由效果的实现方法

一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡...[2021/8/4]

Vue3.0 手写放大镜效果

Vue3.0 手写放大镜效果

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。  c 中的cursor   鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动  在@vueuse中,有一个工具方...[2021/7/26]

vue项目多环境配置(.env)的实现

目录什么是多环境配置,为什么要多环境配置?.env 文件配置到哪里.env文件如何配置,配置多少个?.env文件的配置如何配置运行环境如何获取全局配置项的值如何运行环境 没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位...[2021/7/19]

Vue中实现3D标签云的详细代码

预览: 代码: 页面部分: <template> <div cla ="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="i...[2021/7/19]

vue实现可改变购物数量的购物车

本文实例为大家分享了vue实现改变购物数量的购物车,供大家参考,具体内容如下 效果图: 知识点: 1.computed 计算属性 2.filters 过滤器 实现代码: <!DOCTYPE html> <html lang="en"> ...[2021/7/19]

vue-route路由管理的安装与配置方法

介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图...[2021/7/19]

Vue之全局水印的实现示例

目录1.创建水印Js文件 2.引入操作 2.1 在App.vue中引用或其他页面 2.2 在router配置文件中引用 【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印) 1.创建水印Js文件 /* * @Author: 刘小二 * @D...[2021/7/19]

利用js实现Vue2.0中数据的双向绑定功能

Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj  要定义属性的对象。 prop 要定义或修改的属性的名称 descriptor 要...[2021/7/19]

面试最常问的13种Vue修饰符

目录1.lazy 2.trim 3.number 4.stop 5.capture 6.self 7.once 8.prevent 9.native 10.left,right,middle 11.pa ive 12.camel 12.sync 13.keyCode 1.lazy lazy...[2021/7/12]

Vue登录页面的动态粒子背景插件实现

目录动态粒子效果如下: 安装插件 动态粒子效果如下: 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from ''vue-particles...[2021/7/12]

idea编译器vue缩进报错问题场景分析

项目场景: 在运行Vue项目时,出现了缩进报错的问题,我是使用idea 的编译器,上网查了一下多数都是直接更改缩进的的数量,不过我觉得麻烦,就只是想要关掉验证。 问题描述: idea编译器出现Vue缩进报错 ✘  http: eslint.org/doc r...[2021/7/5]

Vue+express+Socket实现聊天功能

本文实例为大家分享了Vue+expre +Socket实现聊天功能的具体代码,供大家参考,具体内容如下 实现聊天功能 具体功能 只是为了实现功能,不对界面进行美化 1、输入消息点击发送所有用户可以在下方收到消息 2、输入userid后点击连接,可以连接对应的聊天,另外一个界面输入...[2021/6/28]

Vue+ssh框架实现在线聊天

Vue+ssh框架实现在线聊天

本文实例为大家分享了Vue+ h框架实现在线聊天的具体代码,供大家参考,具体内容如下 效果图 核心部分 websocket编程 向后台发送消息 <template> <el-container> <el-header &...[2021/6/28]

vue3.0+vite2实现动态异步组件懒加载

vue3.0+vite2实现动态异步组件懒加载

创建一个vite项目 性能决定成败;vite确实快; cmd 命令行(默认你已经安装了node & npm),执行npm init @vitej app vue-study – --template vue; cd至vue-study,npm install(安装依赖); npm...[2021/6/28]

Vue实现tab导航栏并支持左右滑动功能

本文主要介绍:利用Vue实现tab导航栏,并且通过flex布局实现左右滑动,计算按钮的位置,当点击第一屏展示的最后一个且还有元素未展示时,自动滑动显示出未显示的元素。 tab导航栏布局: <section cla ="theme-list"> <div cl...[2021/6/28]

Vue指令工作原理实现方法

Vue简介 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势。Vue在前端框架中的地位就像曾经的jQuery,由于其简单易懂、开发效率高,已经成为了前端工程师必不可少的技能之一。 Vue是一种渐进...[2021/6/28]

vue.js Router中嵌套路由的实用示例

前言 随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。 用 Vue CLI 进行设置 如果尚未安装,请运行以下命令全...[2021/6/28]

Vue3.0写自定义指令的简单步骤记录

前言 vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令 在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的, 通过自定义指令...[2021/6/28]

vue3+el-table实现行列转换

目录行列转换 分析成绩单的组成 用 vue3 + el-table 做的成绩单 前端模拟数据 使用 el-table 生成成绩单 确定表头 确定数据 计算学生的总分和平均分 计算排名 计算各个学科的平均分。 记录各个科目的最高分和最低分 增加排序功能 增加色彩区分 行列转换 为啥会出现行列...[2021/6/21]

vue中对虚拟dom的理解知识点总结

本质是一个普通的js对象,用于描述视图界面结构的, 在mouted的回调中,可以输出_vnode,  通过图可以知道,_vnode中有以下几个主要的属性: tag:组件的标签名, data: 组件的属性, children: 组件的子...[2021/6/21]

vue 单元测试的推荐插件和使用示例

目录框架 一流的错误报告 活跃的社区和团队 Jest Mocha 推荐插件 Vue Testing Library (@testing-library/vue) Vue Test Utils 示例 单元测试应该: 可以快速运行 易于理解 只测试一个独立单元的工作 ...[2021/6/21]

详解Vue-Router的安装与使用

目录安装 路由的基础配置 将Router安装到Vue中 Router的相关配置Router.routes 的相关配置实现一个简单的路由 1.配置路由2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter...[2021/6/21]

vue实战中的一些实用小魔法汇总

能让你首次加载更快的路由懒加载,怎么能忘? 路由懒加载可以让我们的包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件就行。 举个🌰,如果这样写,加载的时候会全部都加载进来。 const router = new VueRouter({ routes...[2021/6/15]

vsCode一键生成vue模板

1.使用快捷Ctrl + Shift + P唤出控制台 2,然后输入“snippets”并选择 2.接着输入vue, vs code自动生成vue.json文件。   3. 将vue.json文件改为下面得模板(可以根据个人需求修改当中的模板内容)&...[2021/6/15]

浅析vue侦测数据的变化之基本实现

一、Object的变化侦测 下面我们就来模拟侦测数据变化的逻辑。 强调一下我们要做的事情:数据变化,通知到外界(外界再做一些自己的逻辑处理,比如重新渲染视图)。 开始编码之前,我们首先得回答以下几个问题: 1.如何侦测对象的变化? 使用 Object.definePro...[2021/6/15]

vue2/vue3路由权限管理的方法实例

vue2/vue3路由权限管理的方法实例

1. Vue 路由权限控制一般有2种方法 a、路由元信息(meta) b、动态加载菜单和路由(addRoutes) 2 路由元信息(meta)来进行路由权限控制 2.1 在vue2种的实现 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样...[2021/6/15]

一个基于Vue 3+Element Plus的基金看板

原由 在公司,老用手机还是不方便,其他网站页面又花里胡哨的,于是产生了自己做个数据汇总页面,可以DIY,方便后面个性化开发。 介绍 基于Vue 3,UI采用Element Plus 只有一个html文件 数据接口来源:天天基金网 可以添加自己的基金代码、单价、份额,系统会自动计算,而且每...[2021/6/7]

vue实现水波涟漪效果的点击反馈指令

水波效果 当用户点击时,会以点击中心为圆心产生一个水波扩散的涟漪效果,适用各个场景,美观又不浮夸,关键是可以给用户带来很直观的反馈。 来看实现 首先这里基于Vue3自定义指令进行封装,Vue3的自定义指令跟Vue2相比变动不是很大,。我们的目标是完成一个水波指令的基本原型,这里循...[2021/5/31]

vue基于Teleport实现Modal组件

1.认识Teleport 像我们如果写Modal组件、Me age组件、Loading组件这种全局式组件,没有Teleport的话,将它们引入一个.vue文件中,则他们的HTML结构会被添加到组件模板中,这是不够完美的。 没有Teleport 有Telepo...[2021/5/31]

vue 实现上传组件

1.介绍 效果如下图   2.思路 文件上传的两种实现方式 1.From形式 <form method="post" enctype="multipart/from-data" action="api/upload" >...[2021/5/31]

Vue必学知识点之forEach()的使用

前言 在前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,而且这种情形在开发中无所不在,那么本篇博文就来分享一个比较常用又经典的知识点:forEach() 的使用。 forEach() 是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,该语句需要...[2021/5/31]

Vue源码分析之虚拟DOM详解

为什么需要虚拟dom? 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量...[2021/5/31]

vue动态绑定图标的完整步骤

0 图标和图片的不同 图标时字符,图片时二进制流。即图片加载会比图标慢,且加载图标最好不要用img标签,我们可以把图标当成组件用import的方法引入进来,然后当成标签引入。 1 安装svg 1.使用管理员身份运行cmd窗口,切换到项目目录下执行。 npm add sv...[2021/5/24]

vue-table实现添加和删除

本文实例为大家分享了vue-table实现添加和删除的具体代码,供大家参考,具体内容如下 一.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...[2021/5/17]

Vue通过懒加载提升页面响应速度

概述 项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据。不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快。但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js变大所导致的,这个文件加载每次都需30...[2021/5/10]

VUE+Canvas实现简单五子棋游戏的全过程

VUE+Canvas实现简单五子棋游戏的全过程

前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘; (2)监听点击事件画黑白棋子; (3)每次落子之后判断是否有5子相连,有则赢。 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1、画棋盘...[2021/5/10]

Vue开发指南之重点知识梳理

概述 如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和工具时会感到无助和绝望,没关系,您并...[2021/5/10]

373
2
记录数:557 页数:1/1212345678910下一页尾页
加载更多
 友情链接: NPS