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;微…

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

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

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

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

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…

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

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

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…

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…

自助棋牌室如何用一招留住80%的客户?

棋牌室如何用一招守住80%的回头客&#xff0c;你想知道吗&#xff1f; 记得收藏&#xff0c;希望对你有一点点帮助&#xff01; 今天我就分享一个非常简单的方法&#xff0c;简单到所有的棋牌室老板你立马就可以去执行的方法&#xff01;第一步&#xff0c;加好友&#xff0c;…

Java面试八股之Iterator接口和Iterable接口

1. Java为什么不直接实现Iterator接口&#xff0c;而是实现Iterable? 这道题算是一道比较基础的题&#xff0c;面试官肯定也不是想让回答得多深入&#xff0c;只是考查对迭代器的了解程度&#xff0c;最好是看过源码&#xff0c;实际上迭代器的源码并不难。我们把注释折叠起来…

LIUNX文件系统

目录 1.磁盘的物理结构 2.CHS定位法 3.磁盘的逻辑存储 4.系统层面 inode.block[15] 创建文件的流程 查找文件的流程 了解文件系统&#xff0c;首先要了解磁盘是如何存储和读取数据的。 1.磁盘的物理结构 可以理解这个盘上有很多的小磁铁&#xff0c;通过旋转盘面和摆动…

葡韵饼店:云上清明节,千里寄哀思

清明&#xff0c;又称踏青节、祭祖节、行清节&#xff0c;节期在仲春与暮春之交&#xff0c;源自于上古时代的祖先信仰和春祭礼俗&#xff0c;兼具人文与自然两大内涵。 每当到了这个时候&#xff0c;人们都会携带祭祀物品&#xff0c;与家人们齐聚结伴&#xff0c;登山祭祖&am…

支付宝支付之SpringBoot整合支付宝创建自定义支付二维码

文章目录 自定义支付二维码pom.xmlapplication.yml自定义二维码类AlipayService.javaAlipayServiceImpl.javaAlipayController.javaqrCode.html 自定义支付二维码 继&#xff1a;SpringBoot支付入门 pom.xml <dependency><groupId>org.springframework.boot<…

前端开发该不该“跳槽”到鸿蒙?

前言 面对互联网行业的激烈竞争&#xff0c;许多人都深感2023年已是不易&#xff0c;而展望2024年&#xff0c;似乎更是难上加难。这一切的根源&#xff0c;皆因行业多年发展后&#xff0c;人才市场的饱和现象愈发严重。那么&#xff0c;作为前端开发者&#xff0c;我们究竟该…

【尚硅谷】Git与GitLab的企业实战 学习笔记

目录 第1章 Git概述 1. 何为版本控制 2. 为什么需要版本控制 3. 版本控制工具 4. Git简史 5. Git工作机制 6. Git和代码托管中心 第2章 Git安装 第3章 Git常用命令 1. 设置用户签名 1.1 基本语法 1.2 案例实操 2. 初始化本地库 2.1 基本语法 2.2 案例实操 3. 查…

【运输层】TCP 的流量控制和拥塞控制

目录 1、流量控制 2、TCP 的拥塞控制 &#xff08;1&#xff09;拥塞控制的原理 &#xff08;2&#xff09;拥塞控制的具体方法 1、流量控制 一般说来&#xff0c;我们总是希望数据传输得更快一些。但如果发送方把数据发送得过快&#xff0c;接收方就可能来不及接收&#x…

Ubuntu 22.04 配置VirtualBox安装Windows 10虚拟机

Ubuntu 22.04 配置VirtualBox安装Windows 10虚拟机 文章目录 Ubuntu 22.04 配置VirtualBox安装Windows 10虚拟机1.安装virtualbox2.下载Window.iso文件并载入3.问题解决3.1 Kernel driver not installed (rc-1908)3.2 VT-x is disabled in the BIOS for all CPU modes 4.安装Wi…