vue event 添加 class

2024-08-29

vue 点击当前元素添加class 去掉兄弟的class

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue 点击当前元素添加class 去掉兄弟的class</title> <link rel="stylesheet&qu

为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏. 为了解决这个问题,我的解决方案是使用 PWA ,这样就可以将 js 缓存到本地,再次发布后,service-worker.js 会使旧的 js 失效,重新请求并缓存 js. 如果对于问题这个有更好的解决方案,务必请大佬指定一二安装 PWA 的相关依赖包 yarn 安装 yarn add sw-

如何为你的 Vue 项目添加配置 Stylelint

如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经不再维护,以及 --fix 之后 .vue 文件只剩下 <style> 部分等.我在踩完坑跑通出满意的效果后,维护一份新的指引,以备后续项目使用,顺便分享一下. 为什么选择用 stylelint ? 这个问题有两层含义,一是为什么要使用这个样式代码风格检查工具,二是与其他工具相比,为什么选择 st

vue中添加util公共方法&&ES6之import、export

vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

vue 原生添加滚动加载更多

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEventListener('scroll', this.handleScroll) }, destroyed () { window.removeEventListener('scroll', this.handleScroll) }, 定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和

Vue项目添加动态浏览器头部title

0. 直接上预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle

用vue写添加数据、删除数据、筛选数据表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="../libs/vue1026.js"></script> </head> <style> #app { width: 800px; margin: 20px auto; } #tb { width:

原创~vue router-link添加点击事件

在学习vue中会遇到给router-link添加@click,@mouseover等事件我想要做的是用v-for循环输出导航菜单,但是下面代码的@click事件和@mouseover并不会响应 <router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click="changeBgc(index)" @mous

vue动态添加路由addRoutes之不能将动态路由存入缓存

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

VUE实例方法添加、COOKIE、Token

创建COOKIE const COOKIE = { KEY_TOKEN: 'access_token', KEY_USER: 'nbuser', KEY_PERMISSION: 'nb-permission', KEY_OSS: 'upload', KEY_MENU: 'menuData', MAX_AGE: 1000 * 60 * 60 * 24, IMG_FORMAT: '?x-oss-process=image/resize,m_lfit,w_460,limit_1/auto-orient

在vue里添加好看的lottie动画 (^_^)

为什么用lottie ★~★ 1.能让你的程序不那么单调 2.能让一些有审美强迫症的同学好受一点 3.网上有丰富的资源点我进入lottie资源网站引入lottie库 (>.<) 在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 复制代码 2.全局引入vue-lottie 在main.js引入并注册全局组件即可 import lottie from 'vue-lottie'; Vue.component('lo

在vue中添加sass的配置的方法

1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 3.在APP.vue中修改style标签 <style lang="scss

Vue中添加新的路由并访问

1.搭建好Vue脚手架(这里使用的版本是Vue2.0) 2.在代码编辑器(这里使用的是Sublime Text)打开项目文件夹 3.在文件目录src中的component下创建一个新的vue页面,写入测试代码 4.打开src下的router目录下的index.js文件,增加新的路由代码,此处注意的一点是,通过添加mode:'history'可以去除vue访问页面时的#/ 5.通过npm run dev项目运行后,输入localhost:8080/myVue,可以看到页面跳转到了我们新添加的myT

Vue.js 添加组件

<!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <script src="../vue.js"></script> </head> <body> <div id="example"> <my-component v-on:click="cao"

vue router-link 添加在定义事件

在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况我想要做的是v-for遍历出来的选项卡, 鼠标移上去出现删除标签,移除标签消失的效果原代码: <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout=&q

Vue实现添加、删除、关键字查询

从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML中定义一个 id 为 app 的 div ,这里定义的 id 是看你的个人喜好了,只要和后面我们在 script 标签内一直即可下面是一个简单的小例子,实现列表的添加.删除.关键字查询 <!DOCTYPE html> <html lang="en"> <h

Vue 项目添加单元测试发现的问题及解决

用 Jest 测试单文件组件 1.安装 Jest 和 Vue Test Utils npm install --save-dev jest @vue/test-utils 2.配置 package.json // package.json { "scripts": { "test": "jest" } } 3.需要安装和配置 vue-jest 预处理器 npm install --save-dev vue-jest 4.在package.json

vue中添加less配置，用于计算div高度

需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装安装命令::npm install less less-loader --save 安装完后packahe.json中出现如图添加的配置: 然后可以在 .vue 的文件中书写less代码了, 结果:

前端单元测试，以及给现有的vue项目添加jest + Vue Test Utils的配置

文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以前的功能不受影响,有次我测试遗漏导致组件出现bug,而且由于是公共组件,我每次修改还得让其他小伙伴更新组件,很是麻烦,所以一定要写测试, 对自己负责,也是对他人负责! 前端测试介绍 1.单元测试(unit测试)单元测试是把代码看成是一个个的组件,从而实现每一个组件的单独测试,测试内容主要是组件内每一

vue 动态添加对象属性

昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)

vue中添加与删除，关键字搜索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con