Vue项目实现懒加载——自用笔记

熟悉指令语法:

<template><HomePanel title="人气推荐" sub-title="人气爆款 不容错过"><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img v-img-lazy="item.picture" :src="item.picture" alt=""><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul></HomePanel>
</template>

判断:

测试:

如何注册一个全局组件

优化

在directives下面注册一个index.js(懒加载插件)

在main.js下面引入并且注册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费学习简单实操,轻松拿下微软生成式AI认证

在这个AI风暴席卷全球的时代&#xff0c;我们都处在一个充满机遇和挑战的交叉点上。无论你是正在寻找新的职业道路&#xff0c;还是希望在现有的职业生涯中取得突破&#xff0c;掌握AI技能都将成为你开启新篇章的关键。 为了帮助更多的人在这个AI时代中实现跨越&#xff0c;微…

v-deep 打破作用域隔离的原理

vue 中使用 scoped 样式隔离 使用 ::v-deep 和 >>> &#xff0c;穿透作用域样式&#xff0c;以便在父组件中修改子组件的样式&#xff0c;即打破样式隔离。 vue 使用了一种叫做 scoped css 的技术来隔离组件的样式&#xff0c;确保他们不会泄漏到其他组件中&#xf…

spring-core:注解合成(AnnotationUtils.synthesizeAnnotation)的使用示例

spring-core提供的AnnotationUtils工具功能很强大&#xff0c;也很灵活&#xff0c;其中的synthesizeAnnotation方法我一起没搞明白它的使用场景&#xff0c;直到今天我的工作用上了它&#xff0c;学会它的使用。 synthesizeAnnotation方法说明&#xff1a; 通过将包含了注解字…

网工内推 | 14薪!安全服务工程师,上市公司,CISP认证优先

01 远江盛邦 招聘岗位&#xff1a;安全服务工程师 职责描述&#xff1a; 1、负责对客户网络、系统进行渗透测试&#xff0c;漏洞验证、安全评估和安全加固&#xff1b; 2、负责对监督单位的系统安全问题进行监督&#xff0c;并督察改进&#xff1b; 3、对监管单位的安全告警、…

力扣136. 只出现一次的数字

Problem: 136. 只出现一次的数字 文章目录 题目描述思路复杂度Code 题目描述 思路 由于题目要求使用线性时间复杂度和常量级的空间复杂度&#xff0c;再加上找重复元素这个特性&#xff0c;我们可以想到使用位运算来求解&#xff1a; 1.任何数与其本身异或得0&#xff0c;任何…

我的创作纪念日20240418

机缘 我的技术博客起源于对编程的深深热爱和对知识的渴望。从一开始&#xff0c;我就被编程世界的无限可能所吸引&#xff0c;而这种热情也推动我开始了技术创作之旅。我创建博客的初衷有以下几点&#xff1a; 分享实战经验&#xff1a;在工作中&#xff0c;我遇到了许多技术…

HackMyVM-BaseME

目录 信息收集 arp nmap WEB web信息收集 gobuster hydra 目录检索 ssh 提权 get user sudo base64提权 get root 信息收集 arp ┌─[rootparrot]─[~/HackMyVM] └──╼ #arp-scan -l Interface: enp0s3, type: EN10MB, MAC: 08:00:27:16:3d:f8, IPv4: 192.168…

go语言context

context在服务端编程基本都贯穿所有&#xff0c; Context 是请求的上下文信息。对于RPC Server来说&#xff0c;一般每接收一个新的请求&#xff0c;会产生一个新的Context&#xff0c;在进行内部的函数调用的时候&#xff0c;通过传递Context&#xff0c;可以让不同的函数、协…

Flowable工作流引擎:Spring Boot集成指南

Flowable工作流引擎&#xff1a;Spring Boot集成指南 前言开始集成相关配置文件pom文件 前言 在快速变化的软件开发世界中&#xff0c;工作流管理成为了企业应用不可或缺的组成部分。无论是简化复杂业务流程、提升操作效率还是确保流程的一致性和透明性&#xff0c;一个强大的…

python二级题目-仅使用 Python 基本语法,即不使用任何模块,编写 Python 程序计算下列数学表达式的结果并输出,小数点后保留 3 位。

x(((3**4)5*(6**7))/8)**0.5 .format 用法一&#xff1a; print({}.format(1)) 1 print(这个是format的用法{}。。。.format(3)) 这个是format的用法3 ’大括号1:{},大括号2:{},大括号3:{}‘.format(3,4,5) print(’大括号1:{},大括号2:{},大括号3:{}‘.form…

牛客小白月赛90(A,B,C,D,E,F)

比赛链接 官方题解&#xff08;视频&#xff09; 这场偏思维&#xff0c;感觉好像没啥算法。E需要动态维护前 k k k 小&#xff0c;F是个离散化加dp&#xff0c;状态和递推方程比较 非常规&#xff0c;建议还是看一下涨涨姿势。 A 小A的文化节 思路&#xff1a; 签到 cod…

hive使用sqoop与oracle传输数据

下载地址 http://archive.apache.org/dist/sqoop 两个版本sqoop1&#xff08;1.4.x&#xff09;和sqoop2&#xff08;1.99.x&#xff09;&#xff0c;两种不同的架构。 本文使用sqoop1。 sqoop是apache旗下一款“hadoop与关系数据库之间传送数据”的工具。 导入数据&#xf…

5374: 【数学】最后一击

题目描述 小爱和小艾两人组队打一只怪兽。一开始怪兽有 n 点生命值&#xff0c;当 n 变成 0 或更低时&#xff0c;怪兽就被消灭了。他们两人是同时开始攻击的&#xff0c;小爱每分钟可以攻击 a 下&#xff0c;小艾每分钟可以攻击 b 下。若 a2&#xff0c;b4&#xff0c;则小爱…

深圳市第六批专精特新“小巨人”企业申报和第三批专精特新“小巨人”企业申报开始了

各区&#xff08;新区、特别合作区&#xff09;相关工作部门&#xff0c;各企业&#xff1a; 根据《工业和信息化部办公厅关于开展第六批专精特新“小巨人”企业培育和第三批专精特新“小巨人”企业复核工作的通知》&#xff08;工信厅企业函〔2024〕142号&#xff09;要求&…

中仕公考:2024年广东省高校毕业生‘三支一扶‘公告

2024年广东省三支一扶共计划招募3000名左右高校毕业生&#xff0c;服务期限为两年&#xff0c;具体招募岗位和条件可通过广东人事考试网查询。 招考条件&#xff1a; 年龄不超过30周岁(1993年4月22日后出生); 支教岗位须是已取得教师资格证的高校毕业生&#xff0c;支医专业…

Phpstorm环境配置与应用

PhpStorm是一款功能强大的PHP集成开发环境&#xff0c;配置与应用涉及以下步骤&#xff1a; 下载与安装&#xff1a; 访问 PhpStorm 官网下载地址&#xff0c;选择合适的版本进行下载。双击下载的安装包文件进行安装&#xff0c;过程类似于其他IntelliJ IDEA产品。 个性化设…

C++ | Leetcode C++题解之第23题合并K个升序链表

题目: 题解&#xff1a; class Solution {// 21. 合并两个有序链表ListNode *mergeTwoLists(ListNode *list1, ListNode *list2) {auto dummy new ListNode(); // 用哨兵节点简化代码逻辑auto cur dummy; // cur 指向新链表的末尾while (list1 && list2) {if (list1…

秋招嵌入式面经

24秋招-汇川嵌入式面经--超详细&#xff01; 一面 8月24日投递 9月3日一面&#xff08;30min&#xff09; 自我介绍&#xff1a; 介绍一下你的第一个项目吧 对于MCU的选型为什么使用F4的STM32&#xff1f; 项目里面用到了SPI进行两块MCU之间的通信&#xff0c;介绍一下SPI…

Linux操作系统配置git的ssh

系统&#xff1a;Ubuntu20.04LTS 安装git&#xff1a; sudo apt install git 配置git&#xff1a; # 添加全局git用户和邮箱 git config --global user.name "用户名" git config --global user.email "邮箱" # 查看用户名和邮箱是否有误 git config --li…

JavaEE初阶Day 13:多线程(11)

目录 Day 13&#xff1a;多线程&#xff08;11&#xff09;常见的锁策略1. 悲观锁 vs 乐观锁2. 重量级锁 vs 轻量级锁3. 自旋锁 vs 挂起等待锁4. 可重入锁 vs 不可重入锁5. 公平锁 vs 非公平锁6. 互斥锁 vs 读写锁 synchronized实现原理1. 锁升级2. 锁消除3. 锁粗化 CAS Day 13…