Vue.js基础语法下

2023-09-20 11:16:39

                                   

                                        🎬 艳艳耶✌️：个人主页

                                        🔥 个人专栏 ：《Spring与Mybatis集成整合》《springMvc使用》

                                         ⛺️ 生活的理想，为了不断更新自己 !
 

1、事件处理器

1.1. 概述

在Vue中，事件处理器是用来处理DOM事件的方法。它可以在Vue组件中定义和使用，用于响应用户的交互操作。

事件处理器的作用是监听DOM事件，并在事件触发时执行相应的逻辑代码。通过事件处理器，可以实现用户与页面的交互，例如点击按钮、输入文本等操作。当事件被触发时，事件处理器会被调用，可以执行一些逻辑操作，比如更新数据、调用方法等。

事件处理器可以接收事件对象作为参数，可以通过参数来获取事件的相关信息，如鼠标位置、键盘按键等。

事件处理器的主要作用有以下几个方面：

  • 监听DOM事件：通过事件处理器，可以监听各种DOM事件，如点击、鼠标移入移出、键盘输入等。当事件触发时，事件处理器会被调用。
  • 响应用户交互：通过事件处理器，可以实现用户与页面的交互。比如，可以通过点击按钮触发事件处理器来执行一些逻辑操作，如提交表单、发送请求等。
  • 更新数据：事件处理器可以修改Vue实例中的数据，从而更新页面的显示。例如，可以在点击按钮时，通过事件处理器修改数据的值，从而改变页面的状态。
  • 调用方法：事件处理器可以调用Vue实例中定义的方法。这样可以实现更复杂的逻辑操作，如计算、数据处理等。
  • 传递参数：事件处理器可以接收事件对象作为参数，也可以通过事件对象传递其他参数。这样可以在事件处理器中获取事件的相关信息，如鼠标位置、键盘按键等。

总结，事件处理器在Vue中起到了监听和响应用户交互操作的作用，使得页面具有更好的交互性和动态性。通过事件处理器，可以实现各种交互功能，并对页面进行动态更新和操作。

1.2. 实例 

事件修饰符

在Vue中，事件处理器可以使用一些修饰符来改变其行为。以下是一些常用的事件修饰符：

  •  stop：阻止事件冒泡。使用该修饰符可以阻止事件向父元素传播。
  • prevent：阻止默认事件。使用该修饰符可以阻止事件的默认行为。
  • capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的，使用该修饰符可以改为在捕获阶段处理。
  • self：只在事件触发的元素自身上触发事件处理器。如果事件是由子元素触发的，使用`.self`修饰符可以阻止事件处理器执行。
  • once：只触发一次事件处理器。使用该修饰符可以确保事件处理器只执行一次。
  •  passive：提升滚动性能。如果事件处理器中没有调用preventDefault()阻止默认事件，可以使用`.passive`修饰符来告诉浏览器该事件处理器不会阻止默认事件，从而提升滚动的性能。

除了上述修饰符，Vue还提供了一些按键修饰符，用于处理特定的键盘事件。如下：

  • enter ：按下回车键触发事件处理器。
  • tab ：按下Tab键触发事件处理器。
  • delete ：按下删除键触发事件处理器。
  • esc ：按下Esc键触发事件处理器。
  • space ：按下空格键触发事件处理器。

首先创建 HTML 文件，进行事件处理器的实例验证

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title>事件处理</title>
		<style type="text/css">
			.one{
				background-color: aquamarine;
				height: 500px;
				width: 500px;
			}
			.two{
				background-color: palegoldenrod;
				height: 400px;
				width: 400px;
			}
			.three{
				background-color: paleturquoise;
				height: 300px;
				width: 300px;
			}
			.four{
				background-color: pink;
				height: 200px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="one" @click="fun1">
				<div class="two" @click="fun2">
					<div class="three" @click="fun3">
						<div class="four" @click="fun4">
							
						</div>
					</div>
				</div>
			</div>
			<input :value="msg"/>
			<button @click="clickMe">点我</button>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
					msg:'hello a',
					};
				},
				methods:{
					fun1(){
						alert("公主驾到通通闪开1")
					},
					fun2(){
						alert("公主驾到通通闪开2")
					},
					fun3(){
						alert("公主驾到通通闪开3")
					},
					fun4(){
						alert("公主驾到通通闪开4")
					},
					clickMe(){
						alert(this.msg);
					}
				}
			})
			</script>
	</body>
</html>

结果：

2、语法整合

2.1实例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title>事件处理</title>
	</head>
	<body>
		<div id="app">
			姓名：<input name="name" v-model="msg"  /><br />
			密码：<input name="password" v-model="pwd" /><br />
			性别：<span v-for="s in setList">
				  <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 />
			<div style="height: 100px;width: 100px;">
				<span style="margin-bottom: 40px;">个人简介：</span><textarea v-model="sign" cols="10" rows="5"></textarea>
			</div>
			<input type="checkbox" v-model="ok"/>同意<br />
			<button @click="dosub">提交</button>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
					msg:'小花',
					pwd:'123456',
					setList:[{
						name:'男',id:1
					},{
						name:'女',id:2
					}],
					sex:1,
					hobby:[{
					name:'吃汉堡',id:1
					},{
					name:'吃炸鸡',id:2
					},{
					name:'喝可乐',id:3
					},{
					name:'吃薯条',id:4
					}],
					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.msg =this.msg;
						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>

结果：

3、自定义组件

3.1实例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义组件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<p>自定义组件</p>
				<my-button ></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						template:'<button @click="tan">快快点我</button>',
						methods:{
							tan(){
								alert("公主驾到通通闪开")
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

结果：

4、组件通信

在Vue中，组件通信是指不同组件之间进行数据传递和交互的过程。Vue提供了多种方式来实现组件通信，包括父子组件通信、兄弟组件通信和跨级组件通信等。

  • 父子组件通信：父组件通过props向子组件传递数据，子组件通过props接收父组件传递的数据。这种通信方式适用于父组件向子组件传递数据的场景。
  • 子组件向父组件通信：子组件通过$emit方法触发一个自定义事件，父组件通过v-on指令监听并响应该事件。这种通信方式适用于子组件向父组件传递数据或触发某个事件的场景。
  • 兄弟组件通信：可以通过一个共同的父组件来实现兄弟组件之间的通信。父组件作为中介，接收一个组件的数据并通过props传递给另一个组件。这种通信方式适用于兄弟组件之间需要共享数据的场景。
  • 跨级组件通信：可以通过provide/inject来实现跨级组件之间的通信。父组件通过provide提供数据，子孙组件通过inject注入数据。这种通信方式适用于跨越多层级的组件之间需要共享数据的场景。
  • 使用事件总线：可以创建一个全局的Vue实例作为事件总线，组件通过emit和on来触发和监听事件。这种通信方式适用于任意组件之间需要进行事件交互的场景。
  • 使用Vuex进行状态管理：Vuex是Vue官方提供的状态管理库，可以将共享的状态保存在一个全局的store中，不同的组件可以通过store来读取和修改共享的状态。这种通信方式适用于组件之间需要共享状态的场景。

组件通信的作用主要有以下几点：

  •       数据传递：通过组件通信，可以将数据从一个组件传递到另一个组件。比如，父组件可以向子组件传递数据，子组件可以通过props来接收父组件传递的数据。这样可以实现组件之间的数据共享和传递，方便进行组件间的数据交流和协作。
  • 事件触发：通过组件通信，可以在一个组件中触发事件，并在其他组件中监听和响应该事件。比如，子组件可以通过$emit方法触发一个事件，父组件可以通过v-on指令监听并响应该事件。这样可以实现组件之间的交互和通信，方便进行组件间的事件处理和逻辑调用。
  • 共享状态：通过组件通信，可以实现组件之间的状态共享。比如，使用Vuex进行状态管理，可以将状态保存在一个全局的store中，不同的组件可以通过store来读取和修改共享的状态。这样可以实现组件之间的状态同步和数据共享，方便进行组件间的状态管理和数据更新。
  • 组件复用：通过组件通信，可以实现组件的复用。比如，可以将一些常用的UI组件封装成独立的组件，然后在不同的页面中复用这些组件。这样可以减少重复编写相似代码的工作量，提高开发效率和代码的复用性。

总结：组件通信是Vue中非常重要的概念，它可以实现组件之间的数据传递、事件触发、状态共享和组件复用等功能。通过合理使用组件通信，可以更好地组织和管理Vue项目的代码，提高开发效率和代码质量。

4.1父传子

组件通信中父传子是Vue中常用的组件通信方式之一，它可以实现父组件向子组件传递数据、实现组件的复用和解耦、实现数据的传递和共享等功能。通过合理使用父传子，可以更好地组织和管理Vue项目的代码，提高开发效率和代码质量。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件通信</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<p>组件通信----父传子</p>
				<my-button a="看看我的" b="5"></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						props:['a','b'],
						template:'<button @click="tan">{{a}}，{{b}} 小啾啾</button>',
						data:function(){
							return {b:1}
						},
						methods:{
							tan(){
								this.b++;
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

结果：

4.2子传父

组件通信中子传父是Vue中常用的组件通信方式之一，它可以实现子组件向父组件传递数据、实现组件的解耦和复用、实现数据的传递和共享等功能。通过合理使用子传父，可以更好地组织和管理Vue项目的代码，提高开发效率和代码质量。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件通信</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<p>组件通信----子传父</p>
				<my-button b="搞蛋搞蛋" @传值="getParam"></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						props:['b'],
						template:'<button @click="tan">金币金币！{{o}}金币！</button>',
						data:function(){
							return {o:0}
						},
						methods:{
							//在组件内部定义值
							tan(){
								this.o++;
								let name = '蛋搭子';
								let bname = '蛋仔派对';
								let price = 18.8;
								this.$emit('传值',name,bname,price)
							}
						}
					}
				},
				methods:{
					getParam(name,bname,price){
						console.log("创建者:"+name+"，名字:"+bname+"，价格:"+price);
					}
				}
			})
		</script>
	</body>
</html>

结果：

今日分享就结束！

更多推荐

Kafka 源码分析——Producer

文章目录前言Producer整体流程Producer初始化Producer发送流程执行拦截器逻辑获取集群元数据序列化选择分区消息累加进缓存消息发送Producer缓冲区Producer参数调优前言在Kafka中,把产生消息的一方称为Producer即生产者，它是Kafka的核心组件之一，也是消息的来源所在。它的主要功能

千兆以太网网络层 ARP 协议的原理与 FPGA 实现

文章目录前言一、ARP帧的应用场景和存在目的二、ARP帧工作原理三、以太网ARP帧发包实例设计四、以太网CRC校验代码五、以太网ARP帧发包测试---GMII1.模拟数据发送2.仿真模块3.仿真波形六、以太网ARP帧发包测试---RGMII1.顶层文件2.仿真代码七、上板测试（RGMII）前言本节对以太网电路接口和以太

中级职称评审论文重要吗？是不是必须要论文呢？

现在评中级职称职称对论文有什么要求？没有论文可以参与职称评审吗？建筑中级职称怎么评？那自然是从多方面来考核人才是否具备了评中级工程师的能力，职称论文就是考核的标准之一。甘建二告诉你，现在评职称论文是很重要的，没有论文职称是通过不了的，所以评职称的小伙伴，首先建议您这边先考虑发表论文，湖北这边职称评审对于论文的一个要求是

多语言多平台给线程增加命名

在许多编程语言和多线程库中，可以为线程分配一个名称以便更好地识别和调试线程。以下是在一些常见编程语言中如何为线程增加命名的示例：1.Python（使用threading模块）：在Python中，你可以使用threading模块来创建和管理线程。要为线程增加名称，可以在创建线程对象时指定name参数：importthre

[C++随笔录] vector使用

vector使用初始化排序算法reverse和resize通过上一篇文章string的模拟实现,其实我们就已经踏入了STL的门槛.STL容器的大致用法是差不多的⇒那我们这篇博客就讲一点跟string类不一样的新颖的东西初始化跟string一样,vector可以采用下面的形式初始化//默认空间,默认初始化vector<i

瑞芯微：基于RK3568的ocr识别

光学字符识别（OpticalCharacterRecognition,OCR）是指对文本资料的图像文件进行分析识别处理，获取文字及版面信息的过程。亦即将图像中的文字进行识别，并以文本的形式返回。OCR的应用场景卡片证件识别类：大陆、港澳台身份证、通行证、护照识别，卡类识别，车辆类驾驶证识别、行驶证识别，执照识类识别，企

浅谈GPGPU任务调度-1

文章目录前言1.Stream的概念1.文献1的工作2.Hyper-Q的改进前言转自GPUandComputing公众号在先前的文章中《近距离看GPU计算（2）》我们介绍了GPUSM单元以ThreadBlock为单位的调度方法，这些的Block属于同一个kernel任务，当然处于相同的进程上下文(CUDAContext)

什么是BDD测试（行为驱动开发测试）？

1、什么是BDD测试？BDD（BehaviorDrivenDevelopment）测试，即行为驱动开发测试，是一种基于用户行为和需求的软件测试方法。通过将测试用例编写为自然语言脚本，BDD测试可以促进业务需求、开发和测试团队之间的沟通和协作，从而提高代码的可读性、可维护性和可重复性。BDD测试的优点在于，它能够将开发、

微信小程序与idea后端如何进行数据交互

交互使用的其实就是调用的req.get('url')方法进行路径访问，你要先保证自己的springboot项目已经成功运行了：如下：如何交互的？微信小程序：如下为index.js页面在onLoad()事件中调用方法Project.findAllCities()要在当前js页面中先引入project.js别名Projec

Java——》线程的打断（停止正在运行的线程）

推荐链接：总结——》【Java】总结——》【Mysql】总结——》【Redis】总结——》【Kafka】总结——》【Spring】总结——》【SpringBoot】总结——》【MyBatis、MyBatis-Plus】总结——》【Linux】总结——》【MongoDB】总结——》【Elasticsearch】Java—

Linux下git安装及使用

Linux下Git使用1.git的安装sudoaptinstallgit安装完，使用git--version查看git版本2.配置gitgitconfig--globaluser.name"YourName“##配置用户gitconfig--globaluser.emailemail@example.com##配置邮箱

热文推荐
  1. C++真的是 C加加

    📝个人主页：夏目浅石.📌博客专栏：C++的故事🏠学习社区：夏目友人帐.文章目录前言Ⅰ.函数重载0x00重载规则0x01函数重载的原理名字修饰Ⅱ.引用0x00引用的概念0x01引用和指针区分0x03引用的本质0x04引用的特性0x05引用的使用场景0x06常引用0x07指针和引用区别Ⅲ.结语前言亲爱的夏目友人帐的小

  2. mysql 双主复制_配置步骤、遇到的问题及解决办法

    MySQL主主复制结构区别于主从复制结构。在主主复制结构中，两台服务器的任何一台上面的数据库存发生了改变都会同步到另一台服务器上，这样两台服务器互为主从，并且都能向外提供服务。配置步骤：一、修改配置文件（一）服务器A(192.168.115.119)配置如下（该配置需要写到[mysqld]区域内）server-id=1

  3. PY32F003F18之通用定时器MspInit函数

    PY32F003F18高级定时器有TIM1，通用定时器有TIM3，TIM14，TIM16和TIM17。在初始化定时器前，要先写好MspInit函数，才可以调用与之对应的初始化函数。1、TIM1更新事件的MspInit函数//函数功能:在初始化定时器时,HAL库使用该函数//使能TIMx时钟,设置中断优先级,使能TIMx

  4. Spring MVC里的DispatchServlet（结合Spring官网翻译）

    SpringMVC里的DispatchServlet前言1.SpringWebMVC1.1DispatcherServlet（中央调度器）1.1.1ContextHierarchy（上下文层次结构）1.1.2SpecialBeanTypes（特定的bean类型）1.1.3WebMVCConfig1.1.4Servlet

  5. MyBatis特殊SQL的执行（模糊查询、批量删除、动态设置表名、添加功能获取自增的主键）

    一、模糊查询1.1like'%${xxx}%'的方式模糊查询/***根据用户名进行模糊查询*@paramusername*@returnjava.util.List<com.atguigu.mybatis.pojo.User>*/List<User>getUserByLike(@Param("username")Str

  6. 竞赛 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

    文章目录0前言1课题描述2实现效果3算法实现原理3.1数据集3.2深度学习识别算法3.3特征提取主干网络3.4总体实现流程4具体实现4.1预训练数据格式4.2部分实现代码5最后0前言🔥优质竞赛项目系列，今天要分享的是🚩毕业设计人脸性别年龄识别系统-图像识别opencv该项目较为新颖，适合作为竞赛课题方向，学长非常推

  7. FPGA-结合协议时序实现UART收发器（三）：串口接收模块uart_rx

    FPGA-结合协议时序实现UART收发器（三）：串口接收模块uart_rx串口接收模块uart_rx的功能实现文章目录FPGA-结合协议时序实现UART收发器（三）：串口接收模块uart_rx一、功能实现二、uart_rx代码总结一、功能实现对照代码，串口接收模块uart_rx实现功能包括：r_cnt计数信号，计数数据

  8. DMNet复现(一)之数据准备篇：Density map guided object detection in aerial image

    一、生成密度图密度图标签生成采用以下代码，生成训练集密度图gt：importcv2importglobimporth5pyimportscipyimportpickleimportnumpyasnpfromPILimportImagefromitertoolsimportislicefromtqdmimporttqdm

  9. Git常见的面试题

    在软件开发领域，Git是一个极为重要的版本控制系统，几乎每个开发者都需要掌握它。因此，在面试过程中，Git常常成为了面试官们用来考察候选人技能和经验的重要工具之一。以下是一些常见的Git面试题，希望它们能帮助你在面试中脱颖而出。什么是Git？Git是一个分布式版本控制系统，用于跟踪和管理软件项目的变化。它允许多人协作开