Vue语法

news2024/9/25 13:16:33

目录

事件处理器

是什么

 案列

表单的综合案列 

定义

常用功能

组件通信

定义 

 父传子

​编辑 子传父

事件处理器

是什么

事件处理器是一种函数，用于响应和处理事件的触发。在编程中，当特定事件发生时，可以通过事件处理器来执行相应的操作和逻辑。

事件处理器通常与特定的事件绑定在一起。当事件触发时，绑定的事件处理器函数将被调用，并且可以访问事件的相关信息。例如，当用户点击按钮时，与该按钮相关联的点击事件处理器将被调用。

在Vue中，可以使用@或v-on指令来绑定事件处理器。例如，@click="handleClick"表示将handleClick函数作为点击事件的处理器。

事件处理器函数可以接收事件对象作为参数，该对象包含有关事件的信息，如事件类型、触发元素、鼠标位置等。事件处理器函数可以执行任意的JavaScript代码，以响应事件并执行相应的操作，如更新数据、调用方法、触发其他事件等。

总结来说，事件处理器是一种函数，用于响应和处理特定事件的触发，以执行相应的操作和逻辑。

 案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>插值</title>
		<style type="text/css">
			.one{
				background-color: red;
				height: 400px;
				width: 400px;
			}
			.two{
				background-color: yellow;
				height: 300px;
				width: 300px;
			}
			.three{
				background-color: greenyellow;
				height: 200px;
				width: 200px;
			}
			.four{
				background-color: blue;
				height: 100px;
				width: 100px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="one" @click="fun1">
				<div class="two" @click.stop="fun2">
					<div class="three" @click.stop="fun3">
						<div class="four" @click.stop="fun4"></div>
					</div>
				</div>
			</div>
			<input :value="msg" />
			<button @click.once="clickMe">点我</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						msg:'沸洋洋你个臭傻逼',
					};
					},
					methods:{
						fun1(){
							alert("我是红色");
						},
						fun2(){
							alert("我是黄色");
						},
						fun3(){
							alert("我是黄绿色");
						},
						fun4(){
							alert("我是蓝色");
						},
						clickMe(){
							console.log(this.msg);
						}
					}
			});
		</script>
	</body>
</html>

 

 

在@click后面加.stop 

表单的综合案列 

定义

Vue表单是指在Vue.js框架中用于处理用户输入的一组相关元素和功能。它允许你构建交互式的表单界面，处理用户的输入数据，并将其绑定到Vue实例的数据中。Vue表单提供了一种简单、灵活的方式来管理表单元素，实现数据的双向绑定、验证和提交。

常用功能

1. 数据绑定：将表单元素与Vue实例的数据进行绑定，实现双向数据绑定。

2. 表单验证：对用户输入的数据进行验证，确保数据的合法性。

3. 表单提交：监听表单的提交事件，执行相应的操作，如发送表单数据到后台服务器。

4. 表单重置：提供重置按钮，可以将表单中的数据重置为初始状态。

5. 动态表单：根据数据的变化动态生成表单元素，如根据选项数量生成多选框或下拉菜单。 6. 表单数据处理：对表单数据进行处理，如格式化、过滤、计算等。

7. 表单组件封装：将表单元素封装成可复用的组件，提高开发效率和代码可维护性。

8. 表单联动：实现表单元素之间的联动效果，如一个下拉菜单的选项改变会影响另一个表单元素的可选项。

9. 表单数据持久化：将表单数据存储在本地或远程，以便在页面刷新或重新加载后能够恢复数据。

10. 表单样式设计：通过CSS样式对表单进行美化和定制，提升用户体验。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>表单</title>
		
	</head>
	<body> 
		<div id="app">
			姓名：<input name="name" v-model="name" /><br />
			密码：<input type="password" v-model="pwd"/><br />
			性别：<span v-for="s in sexList">
				<input type="radio" name="sex" v-model="sex" :value="s.id" />{{s.name}}
			</span><br />
			籍贯：<select name="myAddr" v-model="myAddr">
				<option v-for="a in address" :value="a.id">{{a.name}}</option>
			</select><br />
			爱好：<span v-for="h in hobby"  >
				<input type="checkbox"  v-model="myLike"  name="myLike" :value="h.id" />{{h.name}}
			</span><br />
			个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea><br />
			同意:<input type="checkbox" v-model="ok" /><br />
			<button v-show="ok" @click="dosub">提交</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						name:'灰太狼',
						pwd:'123456',
						sexList:[{
							name: '男', id:1
						}, 
						{
							name: '女', id:2
						},
						{
							name: '未知', id:0
						}],
						sex:1,
						hobby:[{
								name: '抓羊', id: 1
							},{
								name: '争狼王', id: 2
							},{
								name: '带儿子', id: 3
							}],
						myLike:[],
						address:[{
								name: '羊村', id: 1
							},{
								name: '狼堡', id: 2
							},{
								name: '别墅', id: 3
							},{
								name: '城堡', id: 4
						}],
						myAddr:null,
						sign:null,
						ok:false
					};
					},
					methods:{
						dosub(){
							var obj ={};
							obj.name = this.name;
							obj.pwd = this.pwd;
							obj.sex = this.sex;
							obj.address=this.myAddr;
							obj.love=this.myLike;
							obj.sign=this.sign;
							console.log(obj);
						}
					}
			});
		</script>
	</body>
</html>

 

 

组件通信

定义 

1. 父子组件通信：父组件可以通过props将数据传递给子组件，子组件可以通过$emit触发事件通知父组件。这种方式适合用于父组件向子组件传递静态数据或通过事件监听子组件的动态变化。

2. 子父组件通信：子组件可以通过$emit触发事件，将数据传递给父组件。父组件通过监听子组件的事件，接收数据。这种方式适合用于子组件向父组件传递数据或通知父组件进行某些操作。

3. 兄弟组件通信：如果两个组件处于同一父组件下，它们可以通过父组件作为中间人进行通信。兄弟组件可以通过父组件传递数据，或通过事件派发和监听来进行通信。

4. 跨级组件通信：如果组件之间的关系比较复杂，可以使用Vue的事件总线或Vuex进行跨级组件通信。事件总线是一个空的Vue实例，可以作为中央事件总线，用于触发和监听事件。Vuex是一个专门用于管理Vue应用程序状态的库，可以在任何组件中访问共享的状态。

 父传子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>组件传参父传子</title>
	</head>
	<body>
		<div id="app">
			<p>自定义组件</p>
			<my-button>xx</my-button>
			<p>组件通信-父传子</p>
			<my-button m='懒大王'></my-button>
			<p>组件通信-父传子2</p>
			<my-button m='懒大王' n="10"></my-button>
			</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				components:{
					'my-button':{
						props:['m','10'],
						template:'<button @click="clickMe">被{{m}}点击了{{n}}次</button>',
						data:function(){
							return{
								n:1
							}
						},
						methods:{
							clickMe(){
								this.n++;
							}
						}
					}
				},
				data(){
					return {
						msg:'沸洋洋你个臭傻逼',
					};
				},
			});
		</script>
	</body>
</html>

 子传父

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>组件传参子传父</title>
	</head>
	<body>
		<div id="app">
			<p>组件通信-子传父</p>
			<my-button m='懒大王' @xxx="getParam" ></my-button>
			</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				components:{
					'my-button':{
						props:['m'],
						template:'<button @click="clickMe">被{{m}}点了</button>',
						methods:{
							clickMe(){
								let name ='懒大王';
								let bname = '我的零食屋';
								let price = '白嫖';
								this.$emit('xxx',name,bname,price);
							}
						}
					}
				},
				methods:{
					getParam(a,b,c){
						console.info(a,b,c);
						
					}
				}
			});
		</script>
	</body>
</html>

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

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

相关文章

正则表达式的学习笔记

正则表达式的学习笔记

[!note] 其实这个正则表达式整体上不难, 自从这个 gpt 出来之后这种正则表达式已经不需要我们去写了, 我们并不需要自己能够去写特别深奥的代码, 我们可以将这个正则表达式交给 gpt 去做, 我们只需要能够看懂就行了, 所以学习这个正则表达式, 自己写不出来那种比较难的正则没有…
阅读更多...
Apache Doris 快速入门

Apache Doris 快速入门

1. 基本概念 FE&#xff0c;Frontend&#xff0c;前端节点&#xff0c;接收用户查询请求&#xff0c;SQL解析&#xff0c;执行计划生成&#xff0c;元数据管理&#xff0c;节点管理等 BE&#xff0c;Backend&#xff0c;后端节点&#xff0c;数据存储&#xff0c;执行查询计划…
阅读更多...
什么是SVG（可缩放矢量图形）？它与普通图像格式有何不同？

什么是SVG（可缩放矢量图形）？它与普通图像格式有何不同？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是SVG&#xff1f;⭐ 与普通图像格式的不同⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚…
阅读更多...
Docker部署jar包、数据库、中间件

Docker部署jar包、数据库、中间件

centos7下载docker&#xff1a;https://blog.csdn.net/qq_39997939/article/details/131005939 1、编写dockerfile https://blog.csdn.net/liben0429/article/details/126858971 2、如何确定在dockerfile安装jdk11 https://www.5axxw.com/questions/content/mc5fpt 打包镜…
阅读更多...
python使用websocket实现多端数据同步，多个websocket同步消息，断开链接自动清理

python使用websocket实现多端数据同步，多个websocket同步消息，断开链接自动清理

我使用的是flask_sock这个模块&#xff0c;我的使用场景是&#xff1a;可以让数据多端实时同步。在游戏控制后台和游戏选手的ipad上都可以实时调整角色的技能和点数什么的&#xff0c;所以需要这样的一个功能来实现数据实时同步。 下面是最小的demo案例&#xff1a; from fla…
阅读更多...
【Docker-MyCat】分库分表中间件mycat安装使用（docker版）

【Docker-MyCat】分库分表中间件mycat安装使用（docker版）

分库分表中间件mycat安装使用&#xff08;docker版&#xff09; 1.创建Mycat文件夹2.创建Docker文件夹3.下载Mycat并解压4.编写Dockerfile文件5.打包镜像6.启动镜像7.连接测试 想使用mycat实现mysql分库分表功能&#xff0c;但是docker镜像里&#xff0c;几乎没有mycat&#xf…
阅读更多...
IntelliJ IDEA - Maven 在控制台Maven编译正常，但是在IDEA中不正常，表现不一致

IntelliJ IDEA - Maven 在控制台Maven编译正常，但是在IDEA中不正常，表现不一致

文章目录 现象原因解决验证 现象 一个Maven项目&#xff0c;当导入到IDEA后&#xff0c;无法在IDEA中正常的编译和下载jar依赖&#xff0c;类似下面的截图。 但是在Windows控制台却可以正常编译&#xff0c;类似下面的截图。 CMD执行&#xff1a;mvn clean install -Dmaven.te…
阅读更多...
flink集群与资源@k8s源码分析-资源I 资源请求

flink集群与资源@k8s源码分析-资源I 资源请求

1 资源 资源分析分3部分，资源请求，资源提供，声明式资源管理，本文是第一部分资源请求 2 场景 资源处理有声明式处理资源和细粒度处理资源 是两个实现，两者不是并行的两种实现策略，声明式是资源申请和分配方式，粒度是指资源分割方式，细粒度按需可变的资源，粗粒度是固定…
阅读更多...
注入之mssql数据库（手工注入）

注入之mssql数据库（手工注入）

sa最高权限&#xff08;可以获取系统权限&#xff09; 打开一个mssql数据库 要拼接一个参数 拼接这个参数?xxser1 检查是否是mssql数据库 and exists (select * from%20sysobjects) 为真是属于mssql 查询当前数据库系统的用户名 and system_user0 (由于版本问题谷歌不可以)…
阅读更多...
flink集群与资源@k8s源码分析-总述

flink集群与资源@k8s源码分析-总述

1 简介 集群和资源模块提供动态资源能力，是分布式系统关键基础设施，分布式datax，分布式索引，事件引擎都需要集群和资源的弹性资源能力，提高伸缩性和作业处理能力。本文分析flink的集群和资源的k8s模块，深入了解其设计原理，为开发自有的集群和资源组件做技术准备, 同时涉…
阅读更多...
【大数据】HDFS 的常用命令

【大数据】HDFS 的常用命令

HDFS 的常用命令 1.操作命令1.1 创建文件夹1.2 列出指定的文件和目录1.3 新建文件1.4 上传文件1.5 将本地文件移动到 HDFS1.6 下载文件1.7 查看文件1.8 追写文件1.9 删除目录或者文件1.10 显示占用的磁盘空间大小1.11 HDFS 中的文件复制1.12 HDFS 中的文件移动 2.管理命令2.1 报…
阅读更多...
什么是虚拟DOM（Virtual DOM）？它在前端框架中的作用是什么？

什么是虚拟DOM（Virtual DOM）？它在前端框架中的作用是什么？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是虚拟DOM&#xff08;Virtual DOM&#xff09;&#xff1f;⭐ 虚拟DOM 在前端框架中的作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&…
阅读更多...
设计模式_解释器模式

设计模式_解释器模式

解释器模式 案例 角色 1 解释器基类 &#xff08;BaseInterpreter&#xff09; 2 具体解释器1 2 3... (Interperter 1 2 3 ) 3 内容 (Context) 4 用户 (user) 流程 (上下文) ---- 传…
阅读更多...
Python与数据分析--Matplotlib-2

Python与数据分析--Matplotlib-2

目录 1.写在文前 2.实例1--武汉新冠趋势图 3.简单散点图实例 4.灵活散点图实例 5.饼图操作实例 1.写在文前 """ Matplotlib库我们大致已经学完了&#xff0c;但是缺乏一定的实战经验。 今天我们就来进行一下matplotlib的实战操作。 """ #导…
阅读更多...
OSI七层网络参考模型与数据流通过程

OSI七层网络参考模型与数据流通过程

OSI七层网络参考模型 文章目录 OSI七层网络参考模型1. OSI参考模型初步了解2. OSI参考模型理解3. 数据流通的过程 1. OSI参考模型初步了解 OSI&#xff0c;英文为Open System Interconnect&#xff0c;意为开放式系统互连&#xff0c;国际化标准组织(ISO)指定了OSI模型&#x…
阅读更多...
二叉树经典OJ题——【数据结构】

二叉树经典OJ题——【数据结构】

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 今天我们来进行二叉树的OJ练习&#xff0c;就是利用二叉树的前序、中序、后续以及晨序遍历的特性进行OJ训练。话不多说&#xff0c;来看我们的第一道题。 【leetcode 965.单值二叉树】 OJ链接 如果二叉树每个节点都具…
阅读更多...
JavaScript基础知识12——运算符：算数运算符，比较运算符

JavaScript基础知识12——运算符：算数运算符，比较运算符

哈喽&#xff0c;大家好&#xff0c;我是雷工。 以下为JavaScript基础知识学习笔记。 一、算数运算符 1、算术运算符&#xff1a;即进行数学计算的符号。 2、有哪些算数运算符&#xff1a; &#xff1a;加法 -&#xff1a;减法 *&#xff1a;乘法 /:除法 %:取余&#xff08;…
阅读更多...
湖南衡阳3D扫描在生物仿真研究的应用高精度三维扫描螃蟹-CASAIM中科广电

湖南衡阳3D扫描在生物仿真研究的应用高精度三维扫描螃蟹-CASAIM中科广电

生物仿真研究与应用一直是科研及工艺品的热门方向&#xff0c;很多设计脱胎于生物本身&#xff0c;传统方式又大多只能以画师手绘为主&#xff0c;做到“纤毫毕现”极其困难&#xff0c;故而才有了“齐白石的虾”、“徐悲鸿的马”等出圈的艺术家的画作&#xff0c;对于某种生物…
阅读更多...
云原生的简单理解

云原生的简单理解

一、何谓云原生&#xff1f; 一种构建和运行应用软件的方法 应用程序从设计之初即考虑到云的环境&#xff0c;原生为云而设计&#xff0c;在云上以最佳姿势运行&#xff0c;充分利用和发挥云平台的弹性分布式优势。 二、包括以下四个要素 采用容器化部署&#xff1a;实现云平…
阅读更多...
ASfP: 增强AOSP平台开发的利器——Android Studio for Platform

ASfP: 增强AOSP平台开发的利器——Android Studio for Platform

ASfP: 增强AOSP平台开发的利器——Android Studio for Platform Android Studio for Platform (ASfP) 是一个为使用 Soong 构建系统构建的 Android 开源项目&#xff08;AOSP&#xff09;平台开发者而设计的 Android Studio IDE 版本。与标准 Android Studio 不同&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023