Vue学习笔记11--事件

欢迎莅临 SUN WU GANG 的园子！！！ / 2024-02-22 / 原文

示例一：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 事件的基本使用</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <!-- id 容器 root -->
    <div id="root">
        <h1>欢迎来到：{{name}}</h1>
        <button v-on:click="showInfo">点我提示哦</button>
        <hr />
        <button @click="showInfo">点我也提示的哈</button>
        <hr />
        <button @click="showParamsInfo($event,'我是参数666')">可入参提示哦</button>
    </div>

</body>

</html>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // 对象信息
        data: {
            name: '开心Vue',
        },
        // 方法信息
        methods: {
            showInfo() {
                alert('事件触发成功！')
            },
            showParamsInfo(event, str) {
                alert('事件触发成功！' + str)
            },

        }

    })
    console.log(vm)
</script>

总结：事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名称；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数，否则this就不是vm了,会变为window
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click='demo'和@click='demo($event)'效果是一致的，但后者可传参(传参时，$event用于保证其不丢失--，如果不添加，同时传多个参数，会导致丢失）