在这个例子中，当用户点击按钮时，事件处理器会在捕获阶段被触发，而不是在冒泡阶段。这意味着，即使父元素也有相同的事件处理器，它也不会被触发。

1.1.4.self

.self修饰符用于将事件处理器绑定到当前元素的自身，而不是它的子元素。

  1. self="outerClick">
  2.   <button @click.self="innerClick">点击我button>

在这个例子中，当用户点击按钮时，只有当按钮被点击时，才会触发outerClick方法。如果按钮被点击但并没有被完全聚焦（例如，当用户点击按钮的文本），则不会触发任何方法。

1.1.5.once

.once修饰符用于确保事件处理器只被触发一次。

在这个例子中，当用户点击按钮时，handleClick方法只会被触发一次，即使按钮被多次点击也不会再次触发。

 注1：什么是事件冒泡?

当我们点击最上面的div时，触发点击事件，可是随着冒泡事件的传播，在该div下面的div点击事件也会触发，这就是冒泡事件传播。

1.2.按键修饰符

通常在JavaScript中用于处理用户的键盘输入。

1.2.1enter

这个修饰符通常用于处理"Enter"键的事件。例如，当用户在输入框中按下"Enter"键时，我们可以执行一些操作，如提交表单或开始搜索。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.key === 'Enter') {
  3.     console.log('Enter key pressed');
  4.   }
  5. });

1.2.2.tab

这个修饰符通常用于处理"Tab"键的事件。例如，当用户在输入框中按下"Tab"键时，我们可以将焦点移动到下一个可编辑的元素。

  1. document.querySelectorAll('input, button').forEach(function(element, index) {
  2.   element.addEventListener('keydown', function(event) {
  3.     if (event.key === 'Tab') {
  4.       // Move to next element if it's not the last one
  5.       if (index < this.length - 1) {
  6.         this[index + 1].focus();
  7.       }
  8.     }
  9.   });
  10. });

1.2.3.delete

这个修饰符通常用于处理"Delete"键的事件。例如，当用户在输入框中按下"Delete"键时，我们可以删除输入的内容。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.key === 'Delete') {
  3.     event.preventDefault(); // Prevent the default action of deleting text
  4.     console.log('Delete key pressed');
  5.   }
  6. });

1.2.4.esc

这个修饰符通常用于处理"Esc"键的事件。例如，当用户在输入框中按下"Esc"键时，我们可以取消当前的操作或关闭窗口。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.key === 'Escape') {
  3.     console.log('Escape key pressed');
  4.   }
  5. });

1.2.5.space

这个修饰符通常用于处理"Space"键的事件。例如，当用户在输入框中按下"Space"键时，我们可以触发一个函数或执行一个操作。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.key === ' ') {
  3.     console.log('Space key pressed');
  4.   }
  5. });

1.2.6 .up, .down, .left, .right

这些修饰符通常用于处理方向键的事件。例如，当用户在输入框中按下方向键时，我们可以移动光标到上、下、左、右的某个位置。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.key === 'ArrowUp') {
  3.     console.log('Up arrow key pressed');
  4.   } else if (event.key === 'ArrowDown') {
  5.     console.log('Down arrow key pressed');
  6.   } else if (event.key === 'ArrowLeft') {
  7.     console.log('Left arrow key pressed');
  8.   } else if (event.key === 'ArrowRight') {
  9.     console.log('Right arrow key pressed');
  10.   }
  11. });

1.2.7 .ctrl, .alt, .shift, .meta

这些修饰符通常用于处理特殊键的事件。例如，当用户在输入框中按下Ctrl、Alt、Shift或Meta键时，我们可以执行一些特殊的操作。

  1. document.querySelector('input').addEventListener('keydown', function(event) {
  2.   if (event.ctrlKey) {
  3.     console.log('Ctrl key pressed');
  4.   }
  5.   if (event.altKey) {
  6.     console.log('Alt key pressed');
  7.   }
  8.   if (event.shiftKey) {
  9.     console.log('Shift key pressed');
  10.   }
  11.   if (event.metaKey) {
  12.     console.log('Meta key pressed');
  13.   }
  14. });

以上的修饰符并不是全部，感兴趣的可以去官网查阅相关资料哦！！

二、表单

2.1.绑定值与取值

为了演示效果就不分开讲解绑定值和取值，看代码就好！！！

  1. html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>表单title>
  6. 	head>
  7. 	<h2>表单赋值与取值h2>
  8. 	<div id="app">
  9. 		<form :model="form" @submit.prevent="submit">
  10. 			<div>
  11. 				用户：<input v-model="form.username" placeholder="请输入用户名">
  12. 			div>
  13. 			<div>
  14. 				密码：<input v-model="form.password" placeholder="请输入密码" type="password">
  15. 			div>
  16. 			<div>
  17. 				<label>头像<input type="file" @change="handleChange">label>
  18. 			div>
  19. 			<div>
  20. 				姓名：<input v-v-model.trim="form.name" placeholder="请输入您的真实姓名">
  21. 			div>
  22. 			性别：
  23. 			<span v-for="sexs in sexList">
  24. 				<input v-model="form.sex" type="radio" name="sex" :value="sexs.id">{{sexs.name}}
  25. 			span>
  26. 			<div>
  27. 				年龄：<input v-model.number="form.age" type="number" placeholder="请输入年龄">
  28. 			div>
  29. 			爱好：
  30. 			<span v-for="h in hobby">
  31. 				<input type="checkbox" v-model="form.hobbies" :value="h.id" />{{h.name}}
  32. 			span>
  33. 			
  34. 			<div>
  35. 				所属校区：
  36. 				<select v-model="form.campus">
  37. 					<option v-for="addr in address" :value="addr.id">{{addr.name}}option>
  38. 				select>
  39. 			div>
  40. 			<div>
  41. 				个人信息：
  42. 				<textarea v-model.lazy="form.other" style="vertical-align: middle;" cols="30" rows="10">textarea>
  43. 			div>
  44. 			<div>
  45. 				<input v-model="form.accept" type="checkbox">
  46. 				阅读并接受<a href="https://blog.csdn.net/weixin_74318097?spm=1011.2415.3001.5343">《用户协议》a>
  47. 			div>
  48. 			<button>提交button>
  49. 		form>
  50. 	div>
  51.  
  52. 	<script src="https://cdn.jsdelivr.net/npm/vue@2">script>
  53. 	<script>
  54. 		new Vue({
  55. 			el: '#app',
  56. 			data() {
  57. 				return {
  58. 					form: {
  59. 						hobbies: []
  60. 					},
  61. 					image: {},
  62. 					sexList:[{
  63. 						id:1,name:"女"
  64. 					},{
  65. 						id:2,name:"男"
  66. 					},{
  67. 						id:3,name:"未知"
  68. 					}],
  69. 					hobby: [{
  70. 						id: 1,
  71. 						name: '篮球'
  72. 					}, {
  73. 						id: 2,
  74. 						name: '足球'
  75. 					}, {
  76. 						id: 3,
  77. 						name: '象棋'
  78. 					}],
  79. 					address: [{
  80. 						id: 1,
  81. 						name: "上海"
  82. 					}, {
  83. 						id: 2,
  84. 						name: "深圳"
  85. 					}, {
  86. 						id: 3,
  87. 						name: "杭州"
  88. 					}, {
  89. 						id: 4,
  90. 						name: "湖南"
  91. 					}]
  92. 				}
  93. 			},
  94. 			methods: {
  95. 				submit() {
  96. 					console.log(this.form);
  97. 				},
  98. 				handleChange(event) {
  99. 					let file = event.target.files[0]
  100. 					this.form.image = file
  101. 				}
  102. 			}
  103. 		})
  104. 	script>
  105. html>

上述代码有几点注意事项：

1.在

标签中出现了:model="form"，这是为了将form中的各项数据动态收集到vue的data中的form对象中，方便统一管理。

2.form标签上的@submit.prevent为提交时阻止表单的默认行为（跳转）。

3.v-model.trim是将输入的数据去除前后的空格；v-model.number是转换为Number类型；

v-model.lazy是失去焦点后再把数据渲染到页面上。

4.我们的爱好属性如果没有定义变量或是定义的是null和{}都不行，会选中一个全部选中。

5.我们赋值Value的时候不要直接写value因为Vue抓取不到需要写成:value

2.2.效果演示

我们看一下获取到值没有

控制台这里也获取到值了，到时候我们后台肯定接收的是JSON格式数据，通过这种方式即可。

三、自定义组件

在JavaScript中，自定义组件通常被称为自定义元素，而不是自定义标签。自定义元素是一种HTML元素，它允许您创建可重用的代码片段，这些片段可以在多个页面中使用。自定义元素是Web组件规范的一部分，它们允许您将HTML、CSS和JavaScript组合在一起，以创建可重用的组件。

自定义组件的语法与过滤器相似，所有它也有局部组件和全局组件。

3.1.局部组件

123

这是自定义的组件但是还没有和Vue相关联，所以页面上输出就只是123，下面我来关联一下。

这样页面上展示的就是按钮了。

3.1.1.组件传参（父传子）

  1. "app">
  2. 		<my-button name="我是老子"><my-button>
  3. 	div>
  4.  
  5. 	<script src="https://cdn.jsdelivr.net/npm/vue@2">script>
  6. 	<script>
  7. 		new Vue({
  8. 			el: '#app',
  9. 			components: {
  10. 				"my-button": {
  11. 					props:['name'],
  12. 					template: ""
  13. 				},
  14. 			}
  15. 		})
  16. 	script>

 

通过props接收自定义标签上的属性赋值给需要自定义组件在页面上显示的内容。

 

3.1.2.组件传参（子传父）

  1. "app">
  2. 		<my-button name="我老子" n="1"><my-button>
  3. 	div>
  4.  
  5. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
  6. 	<script>
  7. 		new Vue({
  8. 			el: '#app',
  9. 			components: {
  10. 				"my-button": {
  11. 					props:['name'],
  12. 					// template代表了自定义组件在页面上显示的类容
  13. 					template:'',
  14. 					data:function(){
  15. 						return {
  16. 							n:1
  17. 						}
  18. 					},
  19. 					methods:{
  20. 						incrn(){
  21. 							this.n++;
  22. 						}
  23. 					}
  24. 				}
  25. 			}
  26. 		})
  27. 	script>

 vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定 

总结：

 父Vue实例->Vue实例，通过prop传递数据

 子Vue实例->父Vue实例，通过事件传递数据

3.2.全局组件

这就是全局组件的定义，效果就不展示了和上面的一样。

请添加图片描述

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖

  • 相关阅读:
    Hadoop大数据实战笔记
    以可视化方式解释 Go 并发 - 通道
    java从入门到进阶
    React源码分析2-深入理解fiber
    JS获取当前时间并转换时间格式
    支持OAuth2.0协议认证，JumpServer堡垒机v2.25.0发布
    excel补充操作技能1
    华为软件开发实习生笔试2021.3.31（三）
    Zookeeper集群 + Kafka集群
    3D模型怎么贴法线贴图？
  • 原文地址：https://blog.csdn.net/weixin_74318097/article/details/133040119