Vue(二)——事件

最新推荐文章于 2024-04-19 18:32:11 发布

Jyann~

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量846

点赞数

分类专栏： Vue 前端文章标签： vue Vue 事件

本文链接：https://blog.csdn.net/qq_34569497/article/details/112887056

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

事件

在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @

<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />

一、组件的methods选项

在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问，函数方法中也可以通过this访问data中的数据。

二、通过内联方式绑定事件处理函数

<组件 @事件名称="fn" />

<script>
new Vue({
  ...,
  methods: {
  	fn() {
  		//...	
		}
	}
})
</script>

事件绑定函数中的 this 指向组件实例
事件绑定函数中的第一个参数默认为 event 对象

<组件 @事件名称="fn('kaikeba', $event)" />

<script>
new Vue({
  ...,
  methods: {
  	fn(name, ev) {
  		//...此处ev即传入的事件对象$event
		}
	}
})
</script>

也可以在事件绑定中直接调用函数（并不会立即执行，也是通过事件触发执行的）。直接调用函数时，可以传入数据作为参数，此时必须手动传入事件对象$event(名称不能更改，位置前后都可)。

直接调用函数时，事件对象需要手动传入，名称为 $event

三、事件修饰符

在事件函数中，我们可以通过 ev.preventDefault()、ev.stopPropagation() 来阻止默认行为，阻止冒泡，但是中 vue 中提供一些更加方便的方式来处理这些问题，这就是事件修饰符。

3.1 .stop 阻止事件冒泡

<div class="div1" @click="clickDiv">
            <button @click.stop="clickBtn">按钮1</button>
            <button @click.stop="clickBtn">按钮2</button>
            <button @click.stop="clickBtn">按钮3</button>
        </div>

3.2 .prevent 阻止事件默认行为

3.3 .capture 是否捕获

3.4 .self

div点击后，子级事件都不会触发，只触发自己的事件

        <div class="div1" @click.self="clickDiv">
            <button @click="clickBtn">按钮1</button>
            <button @click="clickBtn">按钮2</button>
            <button @click="clickBtn">按钮3</button>
        </div>

3.5 .once 单次绑定

3.6 .passive 是否允许当前元素阻止默认行为

四、按键修饰符

vue 还提供了许多按键修饰符

需要在输入框中使用

4.1 .keyCode

<组件 @keyup.13="fn" />

4.2 .enter

4.3 .down

4.4 .exact

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="fn">Drag : {{canDrag}}</button>
        <ul>
            <li v-for="user in users" :key="user.id" @click="checkedUser(user,$event)">{{user.name}} -- {{user.checked}}</li>
        </ul>
        <!-- <div class="div1" @click="clickDiv">
            <button @click.stop="clickBtn">按钮1</button>
            <button @click.stop="clickBtn">按钮2</button>
            <button @click.stop="clickBtn">按钮3</button>
        </div> -->

        <div class="div1" @click.self="clickDiv">
            <button @click="clickBtn">按钮1</button>
            <button @click="clickBtn">按钮2</button>
            <button @click="clickBtn">按钮3</button>
        </div>

        <input @keydown.13="clickKeyCode" /> keycode13
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                canDrag: false,
                users:[
                    {id:1,name:'lmf',checked:false},
                    {id:2,name:'yy',checked:false},
                    {id:3,name:'ll',checked:false}
                ]
            },
            methods: {
                fn(){
                    this.canDrag = !this.canDrag;
                    console.log(this.canDrag);
                    
                },
                checkedUser(user,event){
                    user.checked = !user.checked;
                    console.log(event);
                },
                // 需求：当按钮点击时阻止向上冒泡
                clickDiv(){
                    console.log("点击了父级div");
                },
                clickBtn(ev){
                    console.log("点击了按钮");
                    // 原生js阻止冒泡
                    // ev.stopPropagation();
                },
                clickKeyCode(){
                    
                    console.log("点击了keyCode13");
                }
            }
        });
    </script>
</body>

</html>

五、原生事件

自定义组件中可以自定义一些事件，可以通过 .native 修饰符来指定监听原生中的事件，而不是组件自定义事件

Jyann~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(二)——事件

事件在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" />一、组件的methods选项在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问，函数方法中也可以通过this访问data中的数据。二、通过内联方式绑定事件处理函数<组件 @事件名称="fn" /&
复制链接

扫一扫