Vue的@blur/@focus事件@blur 是当元素失去焦点时所触发的事件@focus是元素获取焦点时所触发的事件<template><div><!--@blur当元素失去焦点时触发blur事件--><div><inputtype=&... ...
介绍driver.js 是一个轻量级、无依赖的原生JavaScript引擎,在整个页面中驱动用户的注意力,强大的、高度可定制的原生JavaScript引擎,无外部依赖,支持所有主流浏览器。安装npminstalldriver.js使用importDriverfrom'driver.js'... ...
环境vue3.0.5vite2.3.3安装 Element Plusyarnaddelement-plus#ORnpminstallelement-plus--save完整引入import{createApp}from'vue'importElementPlusfrom'e... ...
一、滚动的实现原理better-scroll的滚动原理和浏览器原生滚动原理是一样的,当子盒子的高度大于父盒子的高度,就会出现纵向滚动;同理,如果子盒子的宽度大于父盒子的宽度,那么就会出现横向滚动。二、better-scroll的 html 结构先来看一下 better-scroll 常见的 html 结... ...
1、去GraphVis官网下载对应的js,新版和旧版的js有所不同visgraph.min.js (基本配置js)visgraph-layout.min.js(配置布局js)2、在需要的vue文件引入js文件importVisGraphfrom'@/assets/js/GraphVis/old/... ...
情景:a---------->c 点击返回,希望返回到ab---------->c 点击返回,希望返回到b解决方案:a页面,加from字段PubSub.subscribe('table-view',function(msg,args){varrowData=args[0],... ...
一、安装Vuex依赖cnpminstallvuex--save二、一步步封装store1. main.js中全局引入store仓库(下一步创建)importstorefrom'./store'//引入storenewVue({el:'#app',router,s... ...
Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。具体内容如下1.html代码<divclass="callbackf... ...
首屏加载首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间利用performance.timing提供的数据:通过DO... ...
vue子组件封装弹框只能执行一次的mounted封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了。贴一下简易代码:父组件:<add-dialogv-if="addVisible":dialogVis... ...
vue让函数只执行一次定义标记变量data(){return{firstPlayFlag:true,//第一次播放标记}}应用if(this.firstPlayFlag){//执行函数this.firstPlayFlag=false}else{}若设计到路由切换,赋值被改变,可考虑引入... ...
首先说一下首页加载为什么会白屏?先说下Spa单页面的加载过程首先就是html,也就是FP阶段<divid="app"></div>页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来渲染在页面上了然后是静态资源css,js,之后解析js,生成HTML... ...
声明mouted(){ this.timer=setInterval(()=>{ //要执行的函数 })}销毁destoryed(){ this.clearInterval(this.timer)}看起来是很简单也没有什么,但是坑来了,实际项目中使用addSet... ...
vue-router的原理在单页面应用中,不同组件之间的切换需要通过前端路由来实现。前端路由1.key是路径,value是组件,用于展示页面内容 2.工作过程:当浏览器的路径改变时,对应的组... ...
vue和react的区别及优缺点共同点数据驱动视图组件化都使用 Virtual DOM1.数据驱动视图在jquery时代,我们需要频繁的操作DOM来实现页面效果与交互;而Vue和React解决了这一痛点,采用数据驱动视图方式,隐藏操作DOM的频繁操作。所以我们在开发时,只需要关注数据变化即可,但是二者实... ...
痛点引出在平时的开发当中,渲染侧边栏导航菜单有时会遇到过需要侧边栏有多层甚至无限层级的问题。此时更优雅的方式便是使用递归组件<el-menu><templateslot="title"><iclass="el-icon-location&q... ...
前言@hook是什么?用来监听组件生命周期的回调函数。这和生命周期函数mounted,created,updated有什么区别?区别1:@hook 会在对应的生命周期函数执行后执行。区别2:@hook 可以在父组件监听子组件的生命周期运行情况。从这段vue源代码中我们能看到hook的部分调用逻辑,vm.... ...
介绍自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和 reactive 到底用哪个。reactive 存在解构丢失响应性的问题,而 ref 需要到处使用 .valu... ...
什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。代码如下:1、在子组件中放一个占位符<... ...
vue中 根据判断条件添加一个或多个style及class的写法style 写法:<i:@click=""></i>class写法<i:class='[show?"class1":"class2",&quo... ...