tulip notes
EffectTang
2023-05-31
目录

常见事件跟属性

# 常见事件跟属性

在 Vue 中，事件是指 DOM 元素上发生的各种行为或动作，例如点击、改变输入值、滚动等。Vue 可以通过绑定事件监听器来响应这些事件。

比如：我们可以使用 v-on 指令（简写为 @）来绑定事件监听器，例如：

<button v-on:click="handleClick">Click me</button>
1

给按钮元素绑定一个 click 事件监听器，当用户点击按钮时，handleClick 方法就会被调用。这个就是所谓的事件处理，事件就是鼠标点击，要进行的处理就是handleClick的方法内容

# 事件处理

在Vue中，有许多种方法可以处理事件（事件：发生的各种事情，比如键盘点击、鼠标移动...）。以下是一些常用的方法：

@click: 这是处理点击事件最常用的方式。例如，您可以在网页上单击一个按钮来触发一个函数，在Vue中使用方式如下：

<button @click="myFunction">Click Me</button>
1

@submit: 用于处理表单提交事件。例如，您可以在网页上提交一个表单，然后将表单数据传递给Vue组件，使用方式如下：

<form @submit.prevent="mySubmitFunction">
  <!-- Your form inputs here -->
  <button type="submit">Submit</button>
</form>
1
2
3
4

@change: 用于处理表单元素(如 input, select, textarea )的值变化事件。例如，您可以在网页上使用文本框组件，然后将文本框的值绑定到Vue的数据模型中。当文本框的值发生变化时，Vue会自动更新数据模型，使用方式如下：

<input type="text" v-model="myText" @change="myChangeFunction">
1

@keydown: 用于处理键盘按键事件。例如，您可以在网页上使用文本框组件，当用户按下键盘上的键时，触发一个函数，使用方式如下：

<input type="text" v-model="myText" @keydown="myKeyDownFunction">
1

@mouseover: 用于处理鼠标悬停事件。例如，您可以在网页上使用图像组件，在用户将鼠标指针悬停在图像上时，触发一个函数，使用方式如下：

<img src="my-image.png" @mouseover="myMouseOverFunction">
1

这些是Vue中的一些简单的事件处理方法。你可以根据您的项目需求使用这些或类似的方法。

下面用其中一个click来介绍用法：

# click事件

@click的全称为：v-on:xxx ，@click:xx 是简写模式，其中xx是方法名（该方法就是处理内容）

<body>
    <!-- 这就是容器 -->
        <div id="root">
            <h1>{{name}} </h1>
            <!-- 双向绑定 -->
            <h2>Hello</h2>
            <button v-on:click="showInfo" >点我看更多信息</button>
            <!-- click的简写 -->
            <button @click="show" >其它的信息</button>
            <button @click="other" >更多</button>
            <button @click="choose($event,num)" >传参</button>
        </div>
    
<script type="text/javascript">
    // 这是实例
      const a =  new Vue({
            data(){
                return{
                    name: '每天学一点',
                    userJob: 'good good'
                } 
            },
            methods:{
                show(){
                    console.log("没有参数时，默认传event_事件对象")
                    console.log(event.target)  
                    // 会打印  <button>其它的信息</button>  ||  event.target.innerText
                    console.log(this) //此处的this是 vue实例
                },
                other:()=>{
                    console.log(this) //此处的this是 window实例
                },
                showInfo(){
                    alert("world")
                },
                choose(event,num){
                    console.log(event)
                    console.log(num)
                }
            }
        });

     a.$mount('#root');
      
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

注意：

1.methods中配置的函数，不要使用箭头函数，否则this的指向就不是vue实例（组件实例对象）

3.方法中没写参数时，会默认传一个event-事件对象

3.需要传event-事件对象时，记得用'$'符占位

4.为什么要传事件对象，它有什么作用？

因为：事件对象提供了有关事件的详细信息，例如事件的类型、目标元素和鼠标位置等。通过分析事件对象，开发人员可以编写更加精确和灵活的事件处理程序。

  • 阻止默认行为或冒泡：event.preventDefault() 和 event.stopPropagation()
  • 访问事件目标元素：event.target
  • 获取事件类型：event.type
  • 获取按下的键值：event.key
  • 获取鼠标点击的位置：event.clientX 和 event.clientY

# 事件修饰符

在Vue中，事件修饰符可以用于改变事件的默认行为。以下是常用事件修饰符：

  • .stop: 阻止事件冒泡
  • .prevent: 阻止事件的默认行为
  • .once: 只触发一次
  • .capture: 以捕获模式添加事件侦听器
  • .self: 只有当事件是从事件目标本身触发时才触发处理程序
  • .passive: 指示事件处理程序不会调用 preventDefault()

其中，.stop和.prevent是最常用的事件修饰符，用于阻止事件冒泡和默认行为。通常在高级组件开发中，.capture也会比较常用。.self则适用于当事件目标本身与父级元素都绑定相同的事件时，只需要处理目标元素的情况。.once和.passive则针对特定场景使用，例如只需要执行单次操作和优化事件处理性能等。

<!-- 阻止事件冒泡 常用-->
<div @click.stop="doSomething"></div>

<!-- 阻止默认行为 常用-->
<a @click.prevent="doSomething" href="#">链接</a>

<!-- 捕获模式添加事件侦听器 -->
<div @click.capture="doSomething"></div>

<!-- 只有当事件是从事件目标本身触发时才触发处理程序 -->
<div @click.self="doSomething"></div>

<!-- 只触发一次 -->
<button @click.once="doSomething">按钮</button>

<!-- 指示事件处理程序不会调用 preventDefault() -->
<a @click.passive="doSomething" href="#">链接</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：

事件修饰符可以组合使用，如：@click.stop.prevent表示阻止事件冒泡和默认行为。且这种组合是有先后顺序的，@click.prevent.stop该组合也是阻止事件冒泡和默认行为，不过它是先阻止默认行为再阻止冒泡事件

例子：阻止默认行为

<template>
  <div>
    <a href="https://www.example.com" @click="doSomething">链接</a>
    <a href="https://www.example.com" @click.prevent="doSomething">链接</a>  
  </div>
</template>

<script>
export default {
  methods: {
    doSomething(event) {
      event.preventDefault();
      console.log('链接被点击了');
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在代码中，我们添加了一个@click事件处理程序，当链接被点击时会触发它。在处理程序中，使用event.preventDefault()方法阻止了链接默认的跳转行为，然后在控制台打印出了一条消息。

在Vue中，每个标签的默认行为并不是完全不同的。 虽然Vue中的HTML标签依然遵循W3C规范，并且大多数标签的默认行为也与传统Web开发中相同，但是由于Vue引入了一些新的概念和机制，因此也带来了一些新的标签和属性。

下面是一些常见的HTML标签及其默认行为：

  1. <a>标签：用于创建超链接，点击后会跳转到指定的URL地址。
  2. <form>标签：用于创建表单，提交表单数据到指定的URL地址。
  3. <input>标签：用于输入文本、数字等数据。
  4. <select>标签：用于创建下拉列表框，用户可以从中选择一个选项。
  5. <textarea>标签：用于输入多行文本。
  6. <button>标签：用于创建按钮，可以在点击时触发相关事件。
  7. <img>标签：用于显示图片。
  8. <ul>和<ol>标签：用于创建无序列表和有序列表。
  9. <li>标签：用于创建列表项。
  10. <div>标签：用于组织页面结构，没有特定的默认行为。

例子：阻止冒泡事件

<template>
  <div @click="handleDivClick">
    <button @click.stop="handleButtonClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('按钮被点击');
    },
    handleDivClick() {
      console.log('DIV被点击');
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上面的例子中，当用户点击按钮时，只会触发 handleButtonClick 方法，不会触发 handleDivClick 方法。

事件冒泡是指在DOM结构中，某个元素触发了某个事件，该事件会从当前元素开始向其父级元素进行传递，直到到达文档根节点或被阻止。例如，当用户在一个按钮上点击时，该按钮的点击事件会被传递到其父节点、祖先节点，直到传递到文档根节点或被阻止。

在事件冒泡中，事件从内部元素传递到外部元素，因此事件冒泡称为自下而上的传播。事件在DOM中的传播过程可以被利用来对一组元素进行事件处理，从而避免需要对每个元素添加事件处理程序。

最后，注意：Vue 中的事件修饰符可以同时使用多个。例如，你可以在一个 @click 事件的后面添加 .prevent 和 .stop 修饰符来阻止默认行为并停止事件冒泡：

<button @click.prevent.stop="handleClick">Click me</button>
1

这里的 .prevent 修饰符阻止了按钮的默认行为，而 .stop 修饰符则停止了事件从按钮向上传播给父元素。

# 键盘事件

在Vue中，可以使用v-on指令来绑定键盘事件

# 常用的键盘事件

  1. @keyup：键盘松开时触发，可在后面加上修饰符来指定触发的键，例如@keyup.enter表示按下回车键时触发。（这里用到了按键别名）
  2. @keydown：键盘按下时触发，也可以加上修饰符来指定触发的键。
  3. @keypress：键盘按键被按下并松开时触发，同样可以加上修饰符。

Vue中提供的按键别名如下：

  • .enter：回车键。
  • .tab：制表键。
  • .delete / .del：删除键。
  • .esc：Esc键。
  • .space：空格键。
  • .up：上箭头键。
  • .down：下箭头键。
  • .left：左箭头键。
  • .right：右箭头键。
  • .ctrl：Ctrl键。
  • .alt：Alt键。
  • .shift：Shift键。
  • .meta：Meta键，对于Windows键盘就是Windows键，而对于苹果键盘就是Command键。
<input v-on:keyup.enter="submitForm">
#简写
<input @keyup.enter="submitForm">
# 我们使用了Vue的.enter按键别名来绑定输入框的keyup事件，这表示用户按下回车键后会触发名为submitForm的事件处理函数。
<input @keyup.enter.y="submitForm">
# 同时按下enter跟y才会触发 名为submitForm的事件处理函数。
1
2
3
4
5
6

例子

<template>
  <div>
    <input type="text" v-model="text" @keyup.enter.prevent="handleSubmit">
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    handleSubmit() {
      // 处理表单提交的逻辑
      console.log('提交表单：' + this.text)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这个例子中，我们给Vue的input元素设置了一个@keyup.enter.prevent事件监听，表示在用户在输入框内按下“回车（Enter）”键时，会执行一个名为handleSubmit的处理函数，同时使用.prevent修饰符阻止默认提交行为。这个处理函数内我们可以添加表单提交逻辑，在控制台输出用户输入的内容。

#Vue
上次更新: 2025/04/23, 16:23:16
初识vue
计算属性跟监视属性

← 计算属性跟监视属性→

最近更新
01
面向切面跟自定义注解的结合
05-22
02
时间跟其他数据的序列化
05-19
03
数据加密与安全
05-17
更多文章>
Theme by Vdoing | Copyright © 2023-2025 EffectTang