入职java开发第一天,不会VUE竟然被.........

Vue2 技术栈

  • 第 1 章:Vue 核心
    • 1.1. Vue 简介
      • 1.1.1. 官网
      • 1.1.2. 介绍与描述
      • 1.1.3. Vue 的特点
      • 1.1.4. 与其它 JS 框架的关联
      • 1.1.5. Vue 周边库
    • 1.2. 初识 Vue
    • 1.3. 模板语法
      • 1.3.1. 效果
      • 1.3.2. 模板的理解
      • 1.3.3. 插值语法
      • 1.3.4. 指令语法
    • 1.4. 数据绑定
      • 1.4.1. 效果
      • 1.4.2. 单向数据绑定
      • 1.4.3. 双向数据绑定
    • 1.5. MVVM 模型
    • vue的数据代理
    • 1.6. 事件处理
      • 1.6.1. 效果
      • 1.6.2. 绑定监听
      • 1.6.3. 事件修饰符
      • 1.6.4. 按键修饰符
    • 1.7. 计算属性与监视
      • 1.7.1. 效果
      • 1.7.2. 计算属性-computed
      • 1.7.3. 监视属性-watch
    • 1.8. class 与 style 绑定
      • 1.8.1. 理解
      • 1.8.2. class 绑定
      • 1.8.3. style 绑定

在一个繁华的都市中,张明怀揣着对后端开发的热爱和憧憬,成功应聘了一家知名的科技公司。他对于即将到来的职场生活充满了期待,希望能够在那里施展自己的才华,实现自己的职业梦想。
然而,就在他入职的第一天,公司为了让他更快地融入团队,安排了一场技术分享会,要求他和其他新入职的同事一起参与。在分享会上,团队领导提到了Vue.js这个重要的前端框架,并询问大家是否熟悉其操作。
张明顿时感到一阵紧张,因为他之前并没有接触过Vue.js。虽然他在HTML、CSS和JavaScript方面有着扎实的基础,但对于Vue.js这个领域却是一片空白。他试图掩饰自己的不安,但内心却充满了忐忑。
分享会结束后,团队领导私下里找到张明,希望他能够在短时间内掌握Vue.js的基本操作,因为公司非常注重前端开发和技术创新。张明虽然答应了,但内心却感到无比的压力。
在接下来的几天里,张明拼命地学习Vue.js的相关知识,但由于缺乏实践经验,他始终无法熟练掌握。每当他试图编写Vue组件或者理解Vue的响应式原理时,总会遇到各种各样的困难。这让他感到非常沮丧和焦虑。
有一天,团队领导突然宣布要进行一次项目评审,并要求每个人都展示他们使用Vue.js开发的部分。张明感到自己的末日就要来临了,因为他知道自己根本无法在规定的时间内完成这个任务。
果然,在项目评审的过程中,张明遇到了一个严重的问题,他的Vue组件无法正常工作。他尝试了各种方法,但都没有成功。这时,团队领导走了过来,询问他的进展情况。
张明无奈地坦白了自己的困境,并表达了自己的愧疚和不安。他本以为会遭到严厉的批评或指责,但出乎意料的是,团队领导并没有责怪他,而是耐心地为他讲解了Vue.js的基本操作和注意事项。
在团队领导的帮助下,张明终于成功地解决了Vue组件的问题。虽然这次经历让他感到非常尴尬和羞愧,但他也深刻地认识到了自己的不足和需要改进的地方。
然而,不幸的是,由于张明在Vue.js方面的技能不足已经严重影响到了团队的项目进度和开发效率。在经过一段时间的观察和评估后,公司最终做出了一个艰难的决定:将张明解雇。
虽然这个结果让张明感到非常失落和沮丧,但他也意识到这是一个重要的教训。他明白了在职场中不仅要掌握专业技能,还要具备快速学习和适应新环境的能力。他决定在离开这家公司之前,认真反思自己的不足并努力学习Vue.js和其他相关技术知识,为将来的职场生涯打下坚实的基础。

所以VUE是什么东西呢?我们接着往下看…

第 1 章:Vue 核心

1.1. Vue 简介

1.1.1. 官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

    1. 动态构建用户界面的渐进式 JavaScript 框架
    1. 作者: 尤雨溪

1.1.3. Vue 的特点

    1. 遵循 MVVM 模式
    1. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
    1. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

    1. 借鉴 Angular 的模板和数据绑定技术
    1. 借鉴 React 的组件化和虚拟 DOM 技术

1.1.5. Vue 周边库

    1. vue-cli: vue 脚手架
    1. vue-resource
    1. axios
    1. vue-router: 路由
    1. vuex: 状态管理
    1. element-ui: 基于 vue 的 UI 组件库(PC 端) ……

1.2. 初识 Vue

		<div id="root">
			<h1>hello world</h1>
		</div>

1.3. 模板语法

1.3.1. 效果

	<div id="root">
			<!-- VUE模板和vue实例一对一绑定-->
			<h1>hello {{name}}</h1>
			<hr />
			<a v-bind:href="url">baidu</a><br />
			<!-- v-bind是单向数据绑定,v-model(只能用在表单类元素上,比如h元素就不行)是双向数据绑定 -->
			数据绑定<input  type="text" v-model="age"/>
		</div>
<script type="text/javascript">
     new Vue(
	{
		el:'#root',
		data:{
			name:'abc',
			url: 'http://www.baidu.com',
			age:20
		},
	});
	// min版的vue需要手动开启
	// Vue.config.devtools = true;
</script>

1.3.2. 模板的理解

html 中包含了一些 JS 语法代码,语法分为两种,分别为:

    1. 插值语法(双大括号表达式)
    1. 指令(以 v-开头)

1.3.3. 插值语法

    1. 功能: 用于解析标签体内容
    1. 语法: {{xxx}} ,xxxx 会作为 js 表达式解析

1.3.4. 指令语法

    1. 功能: 解析标签属性、解析标签体内容、绑定事件
    1. 举例:v-bind:href = ‘xxxx’ ,xxxx 会作为 js 表达式被解析
    1. 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子

1.4. 数据绑定

1.4.1. 效果

在这里插入图片描述

	<body>
		<div id="root">
			<!-- VUE模板和vue实例一对一绑定-->
			<h1>hello {{name}}</h1>
			<hr />
			<a v-bind:href="url">baidu</a><br />
			<!-- v-bind是单向数据绑定,v-model(只能用在表单类元素上,比如h元素就不行)是双向数据绑定 -->
			单向数据绑定<input type="text" :value="age1"/>
			双向数据绑定<input  type="text" v-model="age"/>
		</div>
<script type="text/javascript">
     new Vue(
	{
		el:'#root',
		data:{
			name:'abc',
			url: 'http://www.baidu.com',
			age:20,
			age1:10
		},
	});
	// min版的vue需要手动开启
	// Vue.config.devtools = true;
</script>

1.4.2. 单向数据绑定

    1. 语法:v-bind:href =“xxx” 或简写为 :href;
    1. 特点:数据只能从 data 流向页面(在页面修改值,data不变);

1.4.3. 双向数据绑定

    1. 语法:v-mode:value=“xxx” 或简写为 v-model=“xxx” ;
    1. 特点:数据不仅能从 data 流向页面,还能从页面流向 data(在页面修改值,data会改变);

1.5. MVVM 模型

    1. M:模型(Model) :对应 data 中的数据
    1. V:视图(View) :模板
    1. VM:视图模型(ViewModel) : Vue 实例对象
      在这里插入图片描述

vue的数据代理

Vue实例中的_data==data
在这里插入图片描述

<body>
		<!-- 
				1.Vue中的数据代理:
							通过vm对象来代理data对象中属性的操作(读/写)
				2.Vue中数据代理的好处:
							更加方便的操作data中的数据
				3.基本原理:
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性,都指定一个getter/setter。
							在getter/setter内部去操作(读/写)data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>名称:{{name}}</h2>
			<h2>地址:{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'好好',
				address:'深圳'
			}
		})
	</script>

1.6. 事件处理

1.6.1. 效果

在这里插入图片描述

1.6.2. 绑定监听

    1. v-on:xxx=“fun”
    1. @xxx=“fun” (简写)
    1. @xxx=“fun(参数)”
    1. 默认事件形参: event
    1. 隐含属性对象: $event

1.6.3. 事件修饰符

  • 1.prevent:阻止默认事件(常用);
  • 2.stop:阻止事件冒泡(常用);
  • 3.once:事件只触发一次(常用);
  • 4.capture:使用事件的捕获模式;
  • 5.self:只有event.target是当前操作的元素时才触发事件;
  • 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
	<body>
		<!-- 
		Vue中的事件修饰符:
			1.prevent:阻止默认事件(常用);
			2.stop:阻止事件冒泡(常用);
			3.once:事件只触发一次(常用);
			4.capture:使用事件的捕获模式;
			5.self:只有event.target是当前操作的元素时才触发事件;
			6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
				-->
		<div id="root">
		<h1>欢迎来到{{name}}学习</h1>
		<a href="http://www.baidu.com" @click.prevent='showinfo'>点我</a>
		<button v-on:click.once='showinfo'>点击提示</button>
		<button @click='showinfo2(666)'>点击提示</button>
		
		<div @click='showinfo' class='demo'>
			<button @click.stop='showinfo'>点击</button>
		</div>	
		</div>
	</body>

1.6.4. 按键修饰符

    1. keycode : 操作的是某个 keycode 值的键
    1. .keyName : 操作的某个按键名的键(少部分)
<body>
		<!-- 
				1.Vue中常用的按键别名:
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊,必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

				2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

				3.系统修饰键(用法特殊):ctrl、alt、shift、meta
							(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
							(2).配合keydown使用:正常触发事件。

				4.也可以使用keyCode去指定具体的按键(不推荐)

				5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>
	</body>

1.7. 计算属性与监视

1.7.1. 效果

在这里插入图片描述

<body>
<!-- 
			计算属性:
		1.定义:要用的属性不存在,要通过已有属性计算得来。
		2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
		3.get函数什么时候执行?
					(1).初次读取时会执行一次。
					(2).当依赖的数据发生改变时会被再次调用。
		4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
	    5.备注:
			1.计算属性最终会出现在vm上,直接读取使用即可。
			2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
		 -->
		<div id="root">
		姓:<input type="text" v-model="fristName"/><br />
		名:<input type="text" v-model="lastName"/><br />
		<span>{{addname()}}</span><br />
		姓2:<input type="text" v-model="fristName2"/><br/>
		名2:<input type="text" v-model="lastName2"/><br />
		<span>{{addname2}}</span>
		</div>
	</body>
	<script type="text/javascript">
	
		Vue.config.productionTip=false
	    const vm= new Vue(
		{
			el:'#root',
			data:{
				name:'优讯',
				fristName:'zhang',
				lastName:'san',
				fristName2:'zhang2',
				lastName2:'san2'
				
			},
			methods: {
				addname(){
					return this.fristName+this.lastName;
				}
			},
			computed: {
				addname2: {
	//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
	//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
					return this.fristName2+this.lastName2
					},
	//set什么时候调用? 当fullName被修改时。				
					Set(value){
					const x=value.split('-');
					this.fristName2=x[0];
					this.lastName2=x[1];					
					
					}

				}
			},
			
		});
		// min版的vue需要手动开启
		// Vue.config.devtools = true;
	</script>

1.7.2. 计算属性-computed

    1. 要显示的数据不存在,要通过计算得来。
    1. 在 computed 对象中定义计算属性。
    1. 在页面中使用{{方法名}}来显示计算的结果。

1.7.3. 监视属性-watch

<body>
		<!-- 
				监视属性watch:
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在,才能进行监视!!
					3.监视的两种写法:
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用?当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
    1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性;
    1. 当属性变化时, 回调函数自动调用, 在函数内部进行计算;

1.8. class 与 style 绑定

1.8.1. 理解

    1. 在应用界面中, 某个(些)元素的样式是变化的
    1. class/style 绑定就是专门用来实现动态样式效果的技术

1.8.2. class 绑定

<body>
		<!-- 
			绑定样式:
					1. class样式
	写法:class="xxx" xxx可以是字符串、对象、数组。
	字符串写法适用于:类名不确定,要动态获取。
	对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
	数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
		2. style样式
		:style="{fontSize: xxx}"其中xxx是动态值。
	 	:style="[a,b]"其中a、b是样式对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'程序员学习',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
    1. :class=‘xxx’
    1. 表达式是字符串: ‘classA’
    1. 表达式是对象: {classA:isA, classB: isB}
    1. 表达式是数组: [‘classA’, ‘classB’]

1.8.3. style 绑定

    1. :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
    1. 其中 activeColor/fontSize 是 data 属性

后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java官网下载JDK17版本详细教程(下载、安装、环境变量配置)

第一步&#xff0c;去百度搜索甲骨文官网 第二步 第三步 第四步 第五步 第六步 第七步 第八步 第九步 第十步 然后在系统变量里面找到path-编辑-新建添加这个,点击确定就好了 %JAVA_HOME%\bin 就完成了&#xff0c;接下来测试是否成功。 测试&#xff1a; 第一步&a…

Vue3学习笔记 - 禹神YYDS

1. 教程介绍 https://www.bilibili.com/video/BV1Za4y1r7KE?p1 本篇vue3&#xff0c;内容比较新&#xff0c;比如有setup语法糖用法&#xff1b;只是他使用TS&#xff0c;并不是JS&#xff1b;不过JS也比较熟悉了&#xff0c;也可以学习下TS的语法&#xff0c;课程使用 TypeSc…

Clickhouse

概念 来源 ClickHouse背后的研发团队是俄罗斯的Yandex公司。Yandex是一家俄罗斯的搜索引擎公司&#xff0c;类似于我国的百度&#xff0c;Yandex于2011年在纳斯达克上市。 架构演变 特点 Clickhouse使用的是列式存储 图中第二个使用的列式存储在提取某一部分的全部数据时&a…

KING大咖直播 | KES RAC如何成为核心系统首选?

核心系统负载高 停机代价大 KES RAC来了 KingbaseES共享存储集群 不仅满足您对数据库 扩展性与可用性的严苛要求 更能在保障性能的同时 实现低成本、高效益 是企业核心系统的理想选择 5月16日19:30-20:30 锁定金仓数据库视频号 人大金仓高级研发工程师 深度揭秘如何实现 Kingba…

PXE+Kickstart无人值守安装操作系统

文章目录 什么是PXE&#xff1f;PXE工作原理示意图说明一、环境二、安装前准备三、DHCP服务器配置四、TFTP服务准备五、VSftpd服务准备六、PXE菜单七、重启服务八、创建虚拟机-自动安装系统 什么是PXE&#xff1f; PXE&#xff0c;全名Pre-boot Execution Environment&#xf…

接口自动化框架篇:接口框架中的常归断言封装!

在接口自动化测试中&#xff0c;断言&#xff08;Assertion&#xff09;是非常重要的一部分。通过对接口的返回结果进行断言&#xff0c;我们可以确认接口是否返回了正确的数据&#xff0c;从而验证接口的正确性。 为了提高代码的可读性和可维护性&#xff0c;我们通常会将常用…

前沿动态 | 关于AI大模型,你知道多少?

AI大模型含义 AI 大模型是人工智能预训练大模型的简称&#xff0c;包含了“预训练”和“大模型”两层含义&#xff0c;二者结合产生了新的人工智能模式&#xff0c;即模型在大规模数据集上完成预训练后&#xff0c;仅需少量数据的微调甚至无需微调&#xff0c;就能直接支撑各类…

python高级爱心代码

python高级爱心代码实现&#xff1a; import turtle import random # 设置画布 screen turtle.Screen() screen.bgcolor("black") # 创建画笔 pen turtle.Turtle() pen.speed(0) pen.color("red") pen.penup() # 移动画笔到起始位置 pen.goto(0, -20…

伪头部校验

本章问题 UDP和TCP的伪首部只用于计算校验和&#xff0c;在UDP和TCP的报文中是不存在的&#xff0c;为什么要引入伪首部呢&#xff1f;为什么伪首部的要有这些字段&#xff1f;这里我们就先看一下TCP和UDP的首部格式。 TCP和UDP首部 源端口目的端口&#xff1a;是0-65535任…

代码随想录-算法训练营day41【动态规划04:01背包问题-滚动数组、分割等和子集】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part04● 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集 正式开始背包问题,背包问题还是挺难的,虽然大家可能看了很多背包问题模板代码,感觉挺简单,…

2024汽车行业用户洞察与营销趋势白皮书

来源&#xff1a;小红书&寰球汽车&#xff1a;

晶振的振荡模式有哪些?

晶振&#xff0c;即晶体振荡器&#xff0c;是一种能够产生精确振荡频率的电子元件&#xff0c;它利用石英晶体的压电效应来产生稳定的振荡信号。晶振的振荡模式主要有以下几种&#xff1a;1. 串联谐振&#xff08;Series Resonance&#xff09;&#xff1a; 在这种模式下&am…

Moe 混合多专家模型 原理 + 大模型的有性繁殖 + DIY 自己的 Moe 专家系统

Moe 混合多专家模型 原理 大模型的有性繁殖 DIY 自己的 Moe 专家系统 MoE 介绍标准 Transformer 编码器MoE Transformer 编码器专家网络层 大模型的有性繁殖mergekit 合并 多个专家模型 的方式1. SLERP&#xff08;球面线性插值&#xff09;2. TIES3. DARE4. Passthrough5. L…

露营涮火锅小朋友不慎烫伤大腿 家长抱娃涮河急救获医生点赞

近日&#xff0c;陈女士一家三口在西安市长安区附近露营涮火锅&#xff0c;却不料小朋友在起身时不小心打翻了吃火锅的锅&#xff0c;导致腿被烫伤&#xff0c;陈女士急忙抱着孩子到临近河边&#xff0c;用河水来冲洗小朋友烫伤的腿&#xff0c;随后立刻赶至西安国际医学中心医…

Kroma宣布推出Spectrum:以太坊Layer-2的先进原生质押服务

Kroma宣布推出备受期待的Spectrum&#xff0c;这是一项先进的原生质押服务&#xff0c;旨在彻底改变以太坊 Layer-2格局。Spectrum将于2024年5月14日开始运营&#xff0c;为用户提供利用质押ETH、stETH和eETH的奖励机会&#xff0c;助力用户在去中心化金融&#xff08;DeFi&…

Python 海龟画图(Turtle)命令大全

移动和绘制 forward() | fd() 使用语法&#xff1a; ​​turtle.forward(距离)​​ ​​turtle.fd(距离)​​ 参数说明: 距离 一个数字 (整数 或者 浮点) &#xff08;注&#xff1a;单位是像素&#xff09; 代码示例&#xff1a; import turtle turtle.forward(200) …

docker镜像中搭建FastDfs

docker镜像中搭建FastDfs 一、搭建过程二、docker端口映射三、映射的方法三、配置Tracker 和 Storage 环境&#xff1a;腾讯云服务器上 ubuntu20.04镜像 一、搭建过程 正常直接在云服务器上搭建过程参考博客&#xff1a; https://blog.csdn.net/qq_38531706/article/details/…

分享如何通过定时任务调用lighthouse前端测试脚本+在持续集成测试中调用lighthouse前端测试脚本

最近写了个小工具来优化lighthouse在实际工作中的使用&#xff0c;具体实现了&#xff1a;通过定时任务调用前端测试脚本在持续集成测试中调用前端测试脚本。由于在公司中已经应用&#xff0c;所以就不能提供源码了&#xff0c;这里简单说一下实现思路&#xff0c;希望可以帮助…

武汉星起航:亚马逊跨境电商助力全球贸易:卖家轻松触达全球市场

作为全球最大的电子商务平台之一&#xff0c;亚马逊以其强大的品牌影响力和完善的服务体系&#xff0c;为全球卖家提供了一个展示和销售各类商品的广阔舞台。亚马逊跨境电商业务的快速发展&#xff0c;不仅为卖家打开了通向全球市场的大门&#xff0c;也为买家带来了更多元化、…

JS+JQ+Layui菜单栏点击URL跳转后保持选中状态

目录 一.问题描述 二.问题分析 三.问题解决 3.1JQuery解决 3.2原生JS解决 四.衍生问题 五.衍生问题解决方式 5.1JQ解决 5.2JS解决 六.效果 七.建议 一.问题描述 后端使用“Flask”开发 最近在开发个人网站&#xff0c;其中使用了“Layui”组件库来做“菜单导航栏…