一、事件处理

在 Vue 3 中，事件处理是组件间通信的重要机制。Vue 提供了 v-on 指令（或其缩写 @）来监听 DOM 事件，并在事件触发时执行特定的 JavaScript 代码。以下是 Vue 3 事件处理的详细说明：

1、基本用法

使用 v-on 或 @ 监听事件，并指定一个方法来处理事件：

<script setup>
import { ref } from 'vue'

const message = ref(true)
function handleClick() {
	message.value = !message.value
}

</script>

<template>
  <button @click="handleClick">Click me </button>
  <p> {{message}}</p>
</template>

在这个例子中，当按钮被点击时，handleClick 方法将被调用。

2、事件修饰符

在 Vue.js 中，事件修饰符是用来修改事件监听器的行为的的特殊后缀，可以添加到 v-on 或 @ 指令的参数中。这些修饰符为事件处理提供了更多的控制，以下是 Vue 3 中常用的事件修饰符及其作用：

• .stop

阻止事件冒泡。这意味着事件将不会继续传播到父元素。

<script setup>
import { ref } from 'vue'

const parent = ref(true)
const Button = ref(true)


function handleDivClick() {
	parent.value = !parent.value
 }

function handleButtonClick() {
    Button.value = !Button.value
}



</script>

<template>
  <div @click="handleDivClick">
		
    <button @click.stop="handleButtonClick">Click me</button>
		<p>{{"handleDivClick:" + parent }}</p>
		<p>{{"handleButtonClick:" + Button}}</p>

  </div>

	
</template>

在这个例子中，点击按钮时，handleDivClick 不会被触发，而handleButtonClick 会被触发， 因为 .stop 修饰符阻止了事件冒泡。

• .prevent

阻止事件的默认行为。例如，阻止表单提交或链接跳转。

<template>
  <form @submit.prevent="handleSubmit">
    <input type="submit" value="Submit">
  </form>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function handleSubmit() {
      console.log('Form submitted without actual submit');
    }

    return {
      handleSubmit
    };
  }
});
</script>

在这个例子中，点击提交按钮时，表单不会实际提交，因为 .prevent 修饰符阻止了默认行为。

• .capture：使用事件捕获模式而不是冒泡模式。
• .self：仅当事件在该元素本身触发时才触发处理函数。
• .once：事件处理函数只执行一次。

3、按键修饰符

在 Vue.js 中，按键修饰符是用来监听特定的键盘事件，并在用户按下特定键时触发相应的处理函数。这些修饰符可以让你指定一个键或一组键来触发事件处理器。

基本用法

Vue 为 v-on 或 @ 指令提供了一些内置的按键修饰符，例如 .enter、.tab、.delete（捕获“删除”和“退格”键）、.esc、.space、.up、.down、.left、.right 等。

<script setup>
import { ref } from 'vue'

const EnterKey = ref(true)
const TabKey = ref(true)
const EscKey = ref(true)
const DeleteKey = ref(true)

const SpaceKey = ref(true)


function handleEnter() {
     EnterKey.value = !EnterKey.value;
    }

    function handleTab() {
         TabKey.value = !TabKey.value;
    }

    function handleDelete() {
    	 DeleteKey.value = !DeleteKey.value;
    }

    function handleEsc() {
        EscKey.value = !EscKey.value;
    }

    function handleSpace() {
    	 SpaceKey.value = !SpaceKey.value;
    }


</script>


<template>
  <input @keyup.enter="handleEnter" />
  <input @keydown.tab="handleTab" />
  <input @keyup.delete="handleDelete" />
  <input @keyup.esc="handleEsc" />
  <input @keyup.space="handleSpace" />

  <p>{{"handleEnter:" + EnterKey }}</p>
  <p>{{"handleTab:" + TabKey }}</p>
  <p>{{"handleDelete:" + DeleteKey }}</p>
  <p>{{"handleEsc:" + EscKey }}</p>
  <p>{{"handleSpace:" + SpaceKey }}</p>

</template>

在这个例子中，每个 input 元素都监听了不同的键盘事件，并在用户按下相应的键时触发了对应的处理函数。

4、鼠标按键修饰符

Vue 提供了鼠标按键修饰符，允许你监听特定的鼠标按钮事件。

• .left：监听鼠标左键点击事件。
• .right：监听鼠标右键点击事件。
• .middle：监听鼠标中键点击事件。

<script setup>

import { ref } from 'vue'

let keyLeftname =ref('1');

function onClickLeft() {
	  keyLeftname.value= `onClickLeft`
}

function onClickRight() {
	  keyLeftname.value= `onClickRight`
}

function onClickMiddle() {
	  keyLeftname.value= `onClickMiddle`
}



</script>




<template>

 	<button @click.left="onClickLeft">Left click me</button>

  <button @click.right="onClickRight">Right click me</button>

  <button @click.middle="onClickMiddle">Middle click me</button>
	

	<p>{{"onClickLeft:" + keyLeftname }}</p>

</template>

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

二、表单输入绑定

v-model 是 Vue.js 中的一个指令，用于在表单输入和应用状态之间创建双向数据绑定。它不仅简化了数据绑定的过程，还自动处理了用户输入的更新。

1、文本输入

对于 <input>、<textarea> 和 <select> 元素，v-model 可以创建一个响应式的值，当用户输入时自动更新。

<script setup>

import { ref } from 'vue'

const message = ref('');


</script>



<template>
  <input v-model="message" placeholder="Edit me" />
  <p>Message is: {{ message }}</p>
</template>

在这个例子中，message 是一个响应式引用，它会在用户输入时自动更新。

2、多行文本

对于 <textarea>，v-model 同样适用。

<script setup>

import { ref } from 'vue'
const message = ref('');

</script>



<template>
  <textarea v-model="message" placeholder="Type something..."></textarea>
  <p>Message is: {{ message }}</p>
	
</template>

3、选择框

对于 <select> 元素，v-model 会更新所选选项的值。

<script setup>

import { ref } from 'vue'

 const selected = ref('');


</script>



<template>
  <select v-model="selected">
    <option disabled value="">Please choose an option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <p>Selected: {{ selected }}</p>

</template>

4 、单选按钮

对于单选按钮 <input type="radio">，v-model 会更新选中的值。

<script setup>

import { ref } from 'vue'

  const picked = ref('one');

</script>



<template>
  <input type="radio" v-model="picked" value="one"> One
  <input type="radio" v-model="picked" value="two"> Two
  <p>Picked: {{ picked }}</p>
</template>

5、复选框

对于复选框 <input type="checkbox">，v-model 可以绑定到一个数组或一个布尔值。

<script setup>

import { ref } from 'vue'
    const checked = ref(false);

</script>



<template>
  <input type="checkbox" v-model="checked"> Check me
  <p>Checked: {{ checked }}</p>
</template>

6、修饰符

v-model 可以接受修饰符来改变其行为：

• .lazy：代替 input 事件，使用 change 事件来更新数据。
• .number：将用户的输入转换为数值类型。
• .trim：去除用户输入的首尾空白。

<script setup>

import { ref } from 'vue'
 const msg = ref('');
  const age = ref(0);

</script>



<template>
  <input v-model.lazy="msg" debounce="300">
  <input v-model.number="age">
  <input v-model.trim="msg">
</template>