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>
相关推荐
贩卖纯净水.2 分钟前
Chrome调试工具（查看CSS属性）
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果2 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长2 小时前
基于vue框架的的流浪宠物救助系统25128（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解