【Vue】修饰符&表单提交方式&自定义组件
欢迎来到我的CSDN主页！
我是Java方文山，一个在CSDN分享笔记的博主。
推荐给大家我的专栏《Vue快速入门》。
点击这里，就可以查看我的主页啦！
Java方文山的个人主页
如果感觉还不错的话请给我点赞吧！
期待你的加入，一起学习，一起进步！
目录
一、修饰符
1.1.事件修饰符
1.1.1.stop
1.1.2.prevent
1.1.3.capture
1.1.4.self
1.1.5.once
1.2.按键修饰符
1.2.1enter
1.2.2.tab
1.2.3.delete
1.2.4.esc
1.2.5.space
1.2.6 .up, .down, .left, .right
1.2.7 .ctrl, .alt, .shift, .meta
二、表单
2.1.绑定值与取值
2.2.效果演示
三、自定义组件
3.1.局部组件
3.1.1.组件传参（父传子）
3.1.2.组件传参（子传父）
3.2.全局组件
一、修饰符
1.1.事件修饰符
事件处理器➡特殊后缀（.），用于指明一个指令应该以特殊方式绑定。Vue中常用的修饰符有：v-on、v-model、v-if、v-for、v-bind等。例如，v-on:click是一个事件处理器，它会在用户点击元素时触发。如果需要阻止默认行为，可以使用.prevent修饰符。
1.1.1.stop
在Vue中，当一个事件被触发时，它会向上冒泡到父元素。如果父元素也有相同的事件处理器，那么这个事件处理器将会再次被触发。为了阻止这种事件冒泡，我们可以使用.stop修饰符。
在这个例子中，当用户点击按钮时，只会触发innerClick方法，而不会触发outerClick方法。
1.1.2.prevent
.prevent修饰符用于阻止事件的默认行为。
点击这里
在这个例子中，当用户点击链接时，浏览器会默认跳转到指定的网址。但是，由于我们使用了.prevent修饰符，所以这个默认行为将被阻止。
1.1.3.capture
.capture修饰符用于在捕获阶段而不是冒泡阶段处理事件。
在这个例子中，当用户点击按钮时，事件处理器会在捕获阶段被触发，而不是在冒泡阶段。这意味着，即使父元素也有相同的事件处理器，它也不会被触发。
1.1.4.self
.self修饰符用于将事件处理器绑定到当前元素的自身，而不是它的子元素。
在这个例子中，当用户点击按钮时，只有当按钮被点击时，才会触发outerClick方法。如果按钮被点击但并没有被完全聚焦（例如，当用户点击按钮的文本），则不会触发任何方法。
1.1.5.once
.once修饰符用于确保事件处理器只被触发一次。
在这个例子中，当用户点击按钮时，handleClick方法只会被触发一次，即使按钮被多次点击也不会再次触发。
注1：什么是事件冒泡?
当我们点击最上面的div时，触发点击事件，可是随着冒泡事件的传播，在该div下面的div点击事件也会触发，这就是冒泡事件传播。
1.2.按键修饰符
通常在JavaScript中用于处理用户的键盘输入。
1.2.1enter
这个修饰符通常用于处理"Enter"键的事件。例如，当用户在输入框中按下"Enter"键时，我们可以执行一些操作，如提交表单或开始搜索。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('Enter key pressed');
}
});1.2.2.tab
这个修饰符通常用于处理"Tab"键的事件。例如，当用户在输入框中按下"Tab"键时，我们可以将焦点移动到下一个可编辑的元素。
document.querySelectorAll('input, button').forEach(function(element, index) {
element.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
// Move to next element if it's not the last one
if (index < this.length - 1) {
this[index + 1].focus();
}
}
});
});1.2.3.delete
这个修饰符通常用于处理"Delete"键的事件。例如，当用户在输入框中按下"Delete"键时，我们可以删除输入的内容。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.key === 'Delete') {
event.preventDefault(); // Prevent the default action of deleting text
console.log('Delete key pressed');
}
});1.2.4.esc
这个修饰符通常用于处理"Esc"键的事件。例如，当用户在输入框中按下"Esc"键时，我们可以取消当前的操作或关闭窗口。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
console.log('Escape key pressed');
}
});1.2.5.space
这个修饰符通常用于处理"Space"键的事件。例如，当用户在输入框中按下"Space"键时，我们可以触发一个函数或执行一个操作。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.key === ' ') {
console.log('Space key pressed');
}
});1.2.6 .up, .down, .left, .right
这些修饰符通常用于处理方向键的事件。例如，当用户在输入框中按下方向键时，我们可以移动光标到上、下、左、右的某个位置。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
console.log('Up arrow key pressed');
} else if (event.key === 'ArrowDown') {
console.log('Down arrow key pressed');
} else if (event.key === 'ArrowLeft') {
console.log('Left arrow key pressed');
} else if (event.key === 'ArrowRight') {
console.log('Right arrow key pressed');
}
});1.2.7 .ctrl, .alt, .shift, .meta
这些修饰符通常用于处理特殊键的事件。例如，当用户在输入框中按下Ctrl、Alt、Shift或Meta键时，我们可以执行一些特殊的操作。
document.querySelector('input').addEventListener('keydown', function(event) {
if (event.ctrlKey) {
console.log('Ctrl key pressed');
}
if (event.altKey) {
console.log('Alt key pressed');
}
if (event.shiftKey) {
console.log('Shift key pressed');
}
if (event.metaKey) {
console.log('Meta key pressed');
}
});以上的修饰符并不是全部，感兴趣的可以去官网查阅相关资料哦！！
二、表单
2.1.绑定值与取值
为了演示效果就不分开讲解绑定值和取值，看代码就好！！！
表单
表单赋值与取值
上述代码有几点注意事项：
1.在