Bootstrap

Vue3 学习笔记(十)事件处理及表单输入绑定详解


一、事件处理


在 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>


在这里插入图片描述


;