Vue.js学习-1

news2025/2/23 19:01:45

一、Vue.js环境准备

 

官网地址：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue.js v2教程：Vue.js (vuejs.org) 

在浏览器中安装Vue调试工具：Installation | Vue Devtools (vuejs.org)

VSCode安装见这里：

下载vue.js，分为开发版和生产版。当年引入jQuery后，全局多个2个对象，一个是$，一个是jQuery，如今引入Vue后，全局多个1个对象Vue。

一、初识Vue

Vue就是将数据和界面绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识Vue：
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.root容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'

						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->

		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'Vue',
					address:'Google'
				}
			})

		</script>
	</body>
</html>

二、模板语法

通过Vue特有的语法，能够将数据绑定到标签的属性或者便签体内，通常：
插值语法{{xxx}}用于将数据绑定到标签体内
指令语法v-???用于将数据绑定到便签属性上
v-bind

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>模板语法</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>插值语法</h1>
		<h3>插值语法读取的值：{{name}}</h3>
		<hr />
		<h1>指令语法</h1>
		<a v-bind:href="school.url.toUpperCase()" x="hello">指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件.....）</a></br>
		<a :href="school.url" x="hello">指令语法简写方式</a>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '我是name变量',
			school: {
				name: '我是插值语法值',
				url: 'https://www.baidu.com',
			}
		}
	})
</script>

</html>

三、数据单向、双向绑定

实际数据如果只是从数据库查询来展示，可以使用单项绑定
实际数据如果是从界面输入，绑定到模型上，就需要双向绑定

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>数据绑定</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 普通写法 -->
		<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

		<!-- 简写 -->
		单向数据绑定：<input type="text" :value="name"><br />
		双向数据绑定：<input type="text" v-model="name"><br />

		<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '我是数据	'
		}
	})
</script>

</html>

四、el与data的两种写法

el就是元素的意思，可以在创建Vue对象时立即赋值，也可以后续通过v.$mount('#root')延迟赋值
data可以在创建Vue对象时立即赋值，也可以在创建Vue时，通过执行函数赋值

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>el与data的两种写法</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			data与el的2种写法
					1.el有2种写法
									(1).new Vue时候配置el属性。
									(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
					2.data有2种写法
									(1).对象式
									(2).函数式
									如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
					3.一个重要的原则：
									由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>你好，{{name}}</h1>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//el的两种写法
	/* const v = new Vue({
		//el:'#root', //第一种写法
		data:{
			name:'尚硅谷'
		}
	})
	console.log(v)
	v.$mount('#root') //第二种写法 */

	//data的两种写法
	new Vue({
		el: '#root',
		//data的第一种写法：对象式
		/* data:{
			name:'尚硅谷'
		} */

		//data的第二种写法：函数式
		data() {
			console.log('@@@', this) //此处的this是Vue实例对象
			return {
				name: '尚硅谷'
			}
		}
	})
</script>

</html>

五、MVVM模型理解

Model：数据
View：视图，html
VM：view model视图模型，连接数据和视图的逻辑，Vue实例

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>理解MVVM</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学校名称：{{name}}</h1>
		<h1>学校地址：{{address}}</h1>
		<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			name: 'Google',
			address: '纽约',
		}
	})
	console.log(vm)
</script>

</html>

六、基础知识Object.defineproperty()

JS提供了可以动态给对象设置属性的入口，这是其他c++，JAVA不具备的。给对象添加属性是一套固定的格式，其中固定方法get()和set()是我们需要记住的，其中可以使用变量。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>回顾Object.defineproperty方法</title>
</head>

<body>
	<script type="text/javascript">
		let number = 18
		let person = {
			name: '张三',
			sex: '男',
		}

		Object.defineProperty(person, 'age', {
			// value:18,
			// enumerable:true, //控制属性是否可以枚举，默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false

			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get() {
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value) {
				console.log('有人修改了age属性，且值是', value)
				number = value
			}

		})

		// console.log(Object.keys(person))

		console.log(person)
	</script>
</body>

</html>

七、Vue中数据代理

原始对象是a，所谓代理，就是创建另外一个对象proxy_a，通过访问proxy_a，达到访问a的目的，当你把el和data填入Vue对象vm时，Vue是在vm中设置了一个_data对象，其代表你填写的data，然后Vue将你的data中的属性暴露到vm中，就行程了代理。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>Vue中的数据代理</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<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: 'Google',
			address: '纽约'
		}
	})
</script>

</html>

八、事件处理

在HTML标签中写上Vue特定的属性即可完成事件的绑定，事件函数定义在Vue实例的methods属性里面。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>事件的基本使用</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
	事件的基本使用：
	1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
	2.事件的回调需要配置在methods对象中，最终会在vm上；
	3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
	4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
	5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}上班</h2>
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1（不传参）</button>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			name: 'Google',
		},
		methods: {
			showInfo1(event) {
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！')
			},
			showInfo2(event, number) {
				console.log(event, number)
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！！')
			}
		}
	})
</script>

</html>

九、事件修饰符

事件修饰符用来控制事件行为，如阻止默认事件，阻止冒泡，事件只触发一次等，具体看下面Demo。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>事件修饰符</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		* {
			margin-top: 20px;
		}

		.demo1 {
			height: 50px;
			background-color: skyblue;
		}

		.box1 {
			padding: 5px;
			background-color: skyblue;
		}

		.box2 {
			padding: 5px;
			background-color: orange;
		}

		.list {
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto;
		}

		li {
			height: 100px;
		}
	</style>
</head>

<body>
	<!-- 
	Vue中的事件修饰符：
	1.prevent：阻止默认事件（常用）；
	2.stop：阻止事件冒泡（常用）；
	3.once：事件只触发一次（常用）；
	4.capture：使用事件的捕获模式；
	5.self：只有event.target是当前操作的元素时才触发事件；
	6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.baidu.com" @click.prevent="showInfo">阻止了默认事件</a>

		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">阻止了事件冒泡</button>
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

		<!-- 事件只触发一次（常用） -->
		<button @click.once="showInfo">只触发一次事件</button>

		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg('传参了')">
			使用事件的捕获模式F12
			<div class="box2" @click="showMsg('传参了')">
				使用事件的捕获模式F12
			</div>
		</div>

		<!-- 只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">只有event.target是当前操作的元素时才触发事件</button>
		</div>

		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
		<ul @wheel.passive="demo" class="list">
			<li>事件的默认行为立即执行，无需等待事件回调执行完毕F12</li>
			<li>事件的默认行为立即执行，无需等待事件回调执行完毕F12</li>
			<li>事件的默认行为立即执行，无需等待事件回调执行完毕F12</li>
			<li>事件的默认行为立即执行，无需等待事件回调执行完毕F12</li>
			<li>事件的默认行为立即执行，无需等待事件回调执行完毕F12</li>
		</ul>

	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: 'Google'
		},
		methods: {
			showInfo(e) {
				alert('同学你好！')
				// console.log(e.target)
			},
			showMsg(msg) {
				console.log(msg)
			},
			demo() {
				for (let i = 0; i < 1000; i++) {
					console.log('循环1000次')
				}
				console.log('累坏了')
			}
		}
	})
</script>

</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

每日学术速递4.26

每日学术速递4.26

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.AutoNeRF: Training Implicit Scene Representations with Autonomous Agents 标题&#xff1a;AutoNeRF&#xff1a;使用自主代理训练隐式场景表示 作者&#xff1a;Pierre Marz…
阅读更多...
macOS 13.4Beta 3（22F5049e）发布

macOS 13.4Beta 3（22F5049e）发布

系统介绍 4 月 26 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.4 开发者预览版 Beta 3 更新&#xff08;内部版本号&#xff1a;22F5049e&#xff09;&#xff0c;本次更新距离上次发布隔了 14 天。 macOS Ventura 带来了台前调度、连续互通相机、FaceTime 通…
阅读更多...
Go | 一分钟掌握Go | 5 - 切片

Go | 一分钟掌握Go | 5 - 切片

作者&#xff1a;Mars酱 声明&#xff1a;本文章由Mars酱编写&#xff0c;部分内容来源于网络&#xff0c;如有疑问请联系本人。 转载&#xff1a;欢迎转载&#xff0c;转载前先请联系我&#xff01; 说明 切片和数组有点像&#xff0c;对于我的理解就是声明了固定长度的就是数…
阅读更多...
「 Redis 」RDB和AOF持久化全面解析

「 Redis 」RDB和AOF持久化全面解析

「 Redis 」RDB和AOF持久化全面解析 参考&鸣谢 【说透Redis】10分钟彻底理解Redis的持久化机制&#xff1a;RDB和AOF 程序员读书 AOF 持久化是怎么实现的&#xff1f; xiaolinCoding Redis持久化之RDB与AOF 的区别 1024下午茶 文章目录 「 Redis 」RDB和AOF持久化全面解析前…
阅读更多...
设计模式之解释器模式(C++)

设计模式之解释器模式(C++)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、解释器模式是什么&#xff1f; 解释器模式是一种行为型的软件设计模式&#xff0c;定义了一个解释器&#xff0c;来解释给定语…
阅读更多...
C语言函数大全-- q 开头的函数

C语言函数大全-- q 开头的函数

C语言函数大全 本篇介绍C语言函数大全-- q 开头的函数 1. qsort 1.1 函数说明 函数声明函数功能void qsort(void *base, size_t nmemb, size_t size, int (*compar)(const void *, const void *));用于将指定数组按指定顺序进行排序 参数&#xff1a; base &#xff1a; 指…
阅读更多...
2023年，企业如何做好团队知识管理？

2023年，企业如何做好团队知识管理？

团队知识管理是一个组织管理中非常重要的组成部分。成熟的企业通常会非常注重团队知识管理的实践&#xff0c;以提高团队的协作效率和整体绩效。本文将介绍成熟企业如何做好团队知识管理&#xff0c;以提高企业的竞争力和创新能力。 一、了解团队知识管理的重要性 团队知识管…
阅读更多...
【网络进阶】五种IO网络模型（二）

【网络进阶】五种IO网络模型（二）

文章目录 1. 多路复用IO2. 异步IO3. 信号驱动IO 1. 多路复用IO I/O多路复用这个术语可能对一些人来说比较陌生&#xff0c;但提到select/epoll&#xff0c;就容易理解了。在某些场景下&#xff0c;这种I/O方式也被称为事件驱动I/O&#xff08;event-driven I/O&#xff09;。我…
阅读更多...
[Gitops--5]APISIX

[Gitops--5]APISIX

APISIX Apache APISIX是一款开源的高性能,动态云原生网关.Apache APISIX当前已经覆盖了API网关,LB,Ingress,Service,Mesh等多种场景 1. APISIX部署 使用Helm Chart部署Apache APISIX Ingress Controller Apache APISIX Ingress Controller目前和Apache APISIX网关是强关联的…
阅读更多...
基于html+css的图展示34

基于html+css的图展示34

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…
阅读更多...
GoodSync 数据自动同步备份工具VS傲梅轻松备份系统数据备份工具 哪款更好？

GoodSync 数据自动同步备份工具VS傲梅轻松备份系统数据备份工具 哪款更好？

备份和同步软件的使用越来越广泛&#xff0c;因为在这个数据驱动的时代&#xff0c;数据的备份和恢复非常重要。在这里我想向大家推荐两款备份和同步软件——GoodSync和傲梅轻松备份。 GoodSync是一款备份和同步软件&#xff0c;它可以在多个设备之间同步文件、文件夹、照片、音…
阅读更多...
在电脑上剪辑视频用什么软件 如何在电脑上剪辑视频

在电脑上剪辑视频用什么软件 如何在电脑上剪辑视频

工作中需要剪辑视频的场景越来越多了&#xff0c;视频剪辑已经成了打工人必备技能之一。但对很多新手小白来说&#xff0c;剪辑视频看起来比较困难&#xff0c;那可能是没有找到合适的软件和方法&#xff0c;下面就为大家介绍在电脑上剪辑视频用什么软件&#xff0c;如何在电脑…
阅读更多...
Xcode14 设置Display Name不生效问题

Xcode14 设置Display Name不生效问题

一、前言 早在Xcode13苹果就对Info.plist做了一次大改革&#xff0c;新建的OC项目默认Info.plist文件是“空的”&#xff0c;Swift项目甚至干脆连Info.plist文件都没有了&#xff0c;苹果这样做是为了建立一个新的Info.plist管理方式&#xff0c;把Info.plist物理文件中的配置…
阅读更多...
对数据库中存储的程序进行现代化改造，以使用 Amazon Aurora PostgreSQL 联合查询、pg_cron 和 Amazon Lambda

对数据库中存储的程序进行现代化改造，以使用 Amazon Aurora PostgreSQL 联合查询、pg_cron 和 Amazon Lambda

作为数据库迁移和现代化的一部分&#xff0c;您可以继续使用存储的程序和调度作业&#xff0c;将远程实例中的数据整合到集中式数据存储中。 Amazon Schema Conversion Tool&#xff08;Amazon SCT&#xff09;可帮助您将传统的 Oracle 和 SQL Server 函数转换为其等效的开源函…
阅读更多...
PDF 预览和下载你是怎么实现的？

PDF 预览和下载你是怎么实现的？

前言 在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能&#xff0c;**PDF** 类型文件的来源又包括 H5 移动端 和 **PC 端**&#xff0c;而针对这两个不同端的处理会有些许不同&#xff0c;下文会有所提及。 针对 PDF 预览 的文章不在少数&#xff0c;但似乎都没有提…
阅读更多...
排查和解决CentOS系统上Nacos服务启动报错“java.net.UnknownHostException: jmenv.tbsite.net“问题

排查和解决CentOS系统上Nacos服务启动报错“java.net.UnknownHostException: jmenv.tbsite.net“问题

背景 环境是CentOS7操作系统&#xff0c;nacos服务宕掉了&#xff0c;启动服务的时候报错。 Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.boot.web.servlet.FilterRegistrationBean]: Factory method ‘di…
阅读更多...
太酷啦，Transformer 的有效上下文长度可扩展至百万级

太酷啦，Transformer 的有效上下文长度可扩展至百万级

夕小瑶科技说 原创作者 | 智商掉了一地、iven 用 Recurrent Memory Transformer 架构&#xff1a;可输入长度取决于内存大小 Transformer 因其在自然语言处理领域的成功应用而备受瞩目&#xff0c;同时在计算机视觉领域的研究中&#xff0c;诸多的多模态大模型如 ViT、CLIP、BL…
阅读更多...
iperf3使用教程

iperf3使用教程

文章目录 简介1.下载2. 使用测试实例&#xff1a;案例一 TCP通信测试案例二&#xff1a;UDP测试案例三 传输东西进行测试 iperfs3简单使用样例 简介 iPerf3是用于主动测试IP网络上最大可用带宽的工具。它支持时序、缓冲区、协议&#xff08;TCP&#xff0c;UDP&#xff0c;SCT…
阅读更多...
软件测试方法——等价类划分法详解

软件测试方法——等价类划分法详解

1、等价类划分法的介绍和概念 划分 指互不相交的一组子集&#xff0c;这些子集的并是整个集合。 对测试的意义&#xff1a;完备性和无冗余性。 等价类 等价类是指某个输入域的子集合。在该子集合中&#xff0c;各个输入数据对于揭露程序中的错误都是等效的&#xff0c;具有等…
阅读更多...
23.4.25总结

23.4.25总结

复习了MYSQL数据库的主键和外键的知识&#xff1a; 在设计表时&#xff0c;可以通过外键这个按钮&#xff0c;更改Update rule&#xff08;更新规则&#xff09;和Delete rule&#xff08;删除规则&#xff09;。 外键行为 默认情况下是&#xff1a;NO ACTION、RESTRICT 两…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023