网页打开速度是衡量网站性能的一个极为重要的指标，今天就来说说如何通过JS延迟加载的方式提高页面响应速度：JS延迟加载的含义：即等页面加载完成之后再加载 JavaScript 文件。作用：JS延迟加载有助于提高页面加载速度。途径：1. defer 属性HTML 4.01 为 <script>标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整
转载
2024-01-30 10:21:01
33阅读
在学习Vue的v-for指令时，按照官网上的例子敲，发现在IDE中报错了。明明是官网的例子，为什么会报错呢，我百思不得其解。例子如下：template： vue示例中的data：报错如下：在v-for指令中缺少了v-bind:key。v-bind:key是什么呢？于是我又回到了官方文档，发现就在v-for的下面，就讲了key的作用。key的作用是为每个v-for中的元素绑定一个能够代表这
Vue学习（四）- v-bindv-bind 使用v-bind动态地绑定一个或多个attribute，或一个组件 p
原创
2022-11-09 18:25:50
113阅读
on的事件 dJ()：括号可加可不加，不影响 小栗子（一） <div id="app"> <input type="button" value="v-on指令" v-on:click="dJ()" /> <input type="button" value="v-on缩写" @click="dJ()
原创
2022-06-28 14:08:10
55阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <p> </p> <img v-bin ...
转载
2021-08-15 16:41:00
165阅读
2评论
有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了setTimeout(() =>{ 要延迟的代码},延迟时间);
转载
2023-06-08 11:29:47
347阅读
【docker 数据持久化】容器中的 file-system 目录挂载 bind-mounts 使用方法+代码示例Step1 在Host操作系统创建一个权限为777的目录Step2 从dockerhub上拉镜像Step3 将镜像中欲挂载的目录先cp到主机目录上Step4 万事俱备！开始使用挂载命令进行挂载Fin 结尾再提几句...感谢大家的阅读，祝您今天心情愉快！ 我们知道 docker 的 f
转载
2023-08-21 09:22:03
56阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <style type="text/css"> .active
转载
2021-06-30 19:27:00
165阅读
2评论
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/
vue/dist/
vue.js"></script> </head> <body> <div id="app"> <!-- 属性值必
转载
2021-07-01 10:07:00
199阅读
2评论
工作中遇到一种场景,一个页面要加载多个组件,而且组件中逻辑较为复杂或者元素很多,占用了较多渲染或逻辑运算时间,给用户造成较长时间的白屏,这时候可以用到延迟装载的方式,让组件挨个加载.虽然总的渲染时间没变,甚至更长一些,但是对用户更加友好.延迟装载其实就是利用了浏览器的 requestAnimationFrame() 然后累计帧数,通过判断当前累计帧数和期望渲染帧数是否符合,再用v-if进行控制组件
原创
精选
2024-04-11 11:46:33
198阅读
懒加载单页面问题单页面问题，首屏加载极慢 脚手架自带打包工具，webpack把所有组件打包app.js文件，在首屏一次性全部下载解决1. 异步延迟加载 2. 彻底懒加载1. 异步延迟加载定义：优先下载并显示首页的内容。 其它页面组件采用底层异步下载的方式。在不影响主屏下载速度的情况下，异步下载。优点即加快了首屏的加载速度，又能享受单页面应用带来的好处。步骤①. 不要再router/index.js
转载
2024-04-09 18:22:49
324阅读
动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。 这个参数通常是HTML元素的特性（attribute），比如： v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc":class="{ red
转载
2018-11-28 20:32:00
117阅读
2评论
动态的绑定一个或多个 attribute，也可以是组件的 prop。缩写：: 或者. (当使用.prop 修饰符)期望：any (带参数) | Object (不带参数)参数：attrOrProp (可选的)修饰符：.camel ——将短横线命名的 attribute 转变为驼峰式命名。.prop&nb
原创
2022-09-24 02:05:36
221阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/
vue/dist/
vue.js"></script> </head> <body> <div id="app"> <p v-cloa
转载
2021-06-30 18:54:00
307阅读
2评论
一，v-
bind介绍二，v-
bind实践<body> <div id="app"> <!-- 错误做法 --> <!-- <img src="{{imgURL}}" alt=""> --> <img v-
bind:src="imgURL" alt=""> <a v-
bind:href="aHref">百度一下</a> &
原创
2022-01-17 13:43:45
243阅读
红色框里面的都是vue的模板。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？bind可以给标签里面任何一个标签属性动态的绑定值。通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。插值语法实现的功能很单一，就是将指定的值放到指定的位置。在dat
原创
2023-12-07 10:57:43
61阅读
vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。例如下面的层级关系<top>
<center>
<bottom&
转载
2021-02-01 12:40:36
282阅读
2评论
1.src 2.class [] 这里数组中的数据是data中的变量。 方法论：熟练使用其中的常用几种，就可以了！可以进行单元测试！
原创
2021-08-05 16:20:38
311阅读
