vue
今天也是爱大大的一天吖
这个作者很懒,什么都没留下…
展开
-
vue 虚拟列表 实现高性能渲染大量数据
前端在实现列表大量数据展示时,需要考虑到性能问题,一次性加载全部的数据,必然出现渲染时间过长导致页面卡顿的现象,过去我常用懒加载的方式实现数据的按需展示,现看到有博主介绍使用虚拟列表去实现,在这里记录一下虚拟列表是一种只对可见区域中数据进行渲染,对不可见区域中数据不渲染或部分渲染的技术,也是实现数据按需展示的一种方式,能大大提高渲染的性能。转载 2023-09-18 15:28:59 · 1961 阅读 · 0 评论 -
Vue使用IntersectionObserver实现数据的懒加载
MDN上的介绍Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法,Intersection Observer API 会注册一个回调函数,每当被监视的元素进入或者退出另外一个元素时 (或者 viewport ),或者两个元素的相交部分大小发生变化时,该回调方法会被触发执行注意,初始化监听目标元素时,回调函数就会触发一次。原创 2023-07-11 16:45:55 · 857 阅读 · 0 评论 -
Vue中使用new Date().getTime()作为组件遍历时的key值会导致组件不断销毁和创建的问题
在项目中遇到的一个问题,在子组件中监听父组件给其传递的一个值,但发现监听回调不生效,经反复调试发现,子组件多次触发了created和destroyed生命周期钩子,也就是说子组件被多次的创建和销毁。当key的值发生变化时,Vue会认为这是一个新的组件,因此会销毁旧的组件实例并创建一个新的组件实例,这就导致了组件不断销毁和创建的循环。要解决这个问题,就需要使用一个稳定的、唯一的值作为:key的值,而不是使用每次渲染时生成的随机时间戳。查啊查原因,说是每次渲染时,原创 2023-07-11 15:10:11 · 3534 阅读 · 3 评论 -
vue组件内实现监听某变量改变事件只生效一次
vue组件内实现某监听事件只生效一次原创 2022-10-28 18:04:01 · 3824 阅读 · 0 评论 -
Vue 路由懒加载 及 组件懒加载
什么是懒加载简单来说就是延迟加载或按需加载,即在需要的时候进行加载为什么要使用懒加载更好的客户体验,首屏组件加载速度更快,解决白屏现象常用的懒加载:ES的import 和 vue异步组件一、路由懒加载不用懒加载,vue路由代码写法import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export defaul转载 2021-09-28 17:27:05 · 183 阅读 · 0 评论 -
swiper 阻止slide边缘被脱离容器
resistanceRatio : 0(让slide在边缘不能被拖动)原创 2021-09-24 10:43:48 · 253 阅读 · 0 评论 -
Vue中使用elementUI的message组件时,页面刷新弹出空message问题解决
将Vue.use(Message)这行代码去掉原创 2021-09-22 15:24:28 · 414 阅读 · 0 评论 -
Vue computed计算属性带参数
https://blog.csdn.net/u012632105/article/details/108141841https://segmentfault.com/q/1010000022224916原创 2021-09-22 15:10:31 · 169 阅读 · 0 评论 -
swiper如果loop设为true,点击事件失效而导致的不能正确定位和跳转问题解决
https://www.cnblogs.com/xinci/p/11194990.html原创 2021-09-22 12:28:51 · 943 阅读 · 0 评论 -
iconfont在vue中的使用方法
我靠 要加iconfont 这个类名才生效!!!原创 2021-09-22 10:47:48 · 151 阅读 · 0 评论 -
vue中实现锚点定位以及平滑滚动到指定位置
版权声明:本文为CSDN博主「hh22。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/weixin_44953689/article/details/108364985// 点击此处 <div @click="goDingyue">立即订阅</div> // 跳转到该位置<div class="dingyue_box" ref="dingyue_box">转载 2021-09-10 22:39:52 · 720 阅读 · 0 评论 -
vue 计算属性computed和方法的区别
1. 计算属性使用时,是当成属性使用的,而方法需要调用<div id="app">姓:{{firstName}} 名:{{lastName}} <p> 全名:{{fullName}} </p> <p> 全名:{{getFullName()}}//不写()会报错 </p></div><script> var vm = new Vue({ data: { first原创 2020-07-10 16:49:21 · 272 阅读 · 1 评论 -
vue 模板的含义 作用 写法
模板:被vue实例控制的页面片段1.模板的作用是什么?为了提高渲染效果,vue会把模板编译成为虚拟DOM树(VNode),然后再生成真实的DOM从左至右 依次是模板、虚拟DOM树、真实的DOM2.模板写在哪?在挂载的元素内部直接书写<div id="app"> <p>{{title}}</p></div><script> var vm = new Vue({ data: { title: "g1",原创 2020-07-10 15:57:55 · 1188 阅读 · 1 评论 -
vue实例的两种挂载方式:el:“css选择器“ / $mount(“css选择器“)
让vue实例控制网页中某个区域的过程,称之为挂载。两种方式:通过el:"css选择器"进行配置通过vue实例.$mount("css选择器")进行配置方法1: 通过el:"css选择器"进行配置在创建vue实例时就进行挂载<div id="app"> {{title}} </div> <script src="vue.js"></script> <script> var vm = ne原创 2020-07-09 16:45:13 · 921 阅读 · 0 评论