Vue(一)3.事件

最新推荐文章于 2025-02-25 10:00:00 发布

onjulythe17th

最新推荐文章于 2025-02-25 10:00:00 发布

阅读量372

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42809433/article/details/107755347

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

Vue.js

文章目录

Vue.js
- 事件

事件

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

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

组件的 `methods` 选项

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

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

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

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

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

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

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

也可以在事件绑定中直接调用函数（并不会立即执行，也是通过事件触发执行的）

事件对象需要手动传入，名称为 $event

<body>

    <div id="app">
        <button v-on:click="add">按钮</button>
        {{n1}}
        <hr>
        <ul style="padding: 50px; background: red;" v-on:click.self="clickUl">
                                <!--事件名称必须是：$event，默认是事件e，但是若传了别的参数，事件需要手动添加-->  
            <li v-for="user of users" :key="user.id" v-on:click="c(user, $event)" style="background: black;color:white;">
                {{user.name}}
            </li>
        </ul>
    </div>

    <script src="js/vue.js"></script>
    <script>


        let app = new Vue({
            el: '#app',
            data: {
                n1: 1,
                users: [
                    {id: 1, name: 'zmouse'},
                    {id: 2, name: 'mt'},
                    {id: 3, name: 'hai'}
                ]
            },
            methods: {
                add() {
                    // this 指向 当前组件实例
                    this.n1++;
                },
                c(user, e) {
                    console.log(user, e.target);
                },
                clickUl() {
                    console.log('clickUl');
                }
            }
        });

    </script>

</body>