Vue语法

小徐o2023-09-21 9:04

目录

事件处理器

是什么

案列

表单的综合案列

定义

常用功能

组件通信

定义

父传子

[​编辑 子传父](#编辑 子传父)

事件处理器

是什么

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

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

在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. 表单数据处理：对表单数据进行处理，如格式化、过滤、计算等。

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

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

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

  9. 表单样式设计：通过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>
相关推荐
蟾宫曲3 小时前
在 Vue3 项目中实现计时器组件的使用（Vite+Vue3+Node+npm+Element-plus，附测试代码）
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心3 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455663 小时前
学籍管理系统：实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029403 小时前
运行Zr.Admin项目（前端）
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
LCG元4 小时前
Vue.js组件开发-使用vue-pdf显示PDF
vue.js
魏时烟4 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00015 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3（组件传值）
javascript·vue.js·typescript·npm·node.js·css3
烟波人长安吖～5 小时前
【目标跟踪+人流计数+人流热图（Web界面）】基于YOLOV11+Vue+SpringBoot+Flask+MySQL
vue.js·pytorch·spring boot·深度学习·yolo·目标跟踪
踢足球的，程序猿5 小时前
Android native+html5的混合开发
javascript
2401_882726485 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
热门推荐
01【数学建模】建筑工地开工问题02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04液体神经网络：LNN是个啥概念？05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07Qt | 开发工具(top1)08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10Apache SeaTunnel 集群部署详细教程