Vue.js入门学习--事件处理（五）-CSDN博客

本文链接：https://blog.csdn.net/Appleyk/article/details/79224949

一如既往，完整demo

<html>

<head>
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <!-- 使用v-on监听DOM事件，并执行一些JavaScript代码 v-on:click 简写 === @click -->
    <!-- 简单JavaScript代码片段可以像下面这样做 -->
    <div id="app">
        <button @click="counter+=1">监听点击次数(任意次)</button>
        <!-- DOM事件对象修饰符'.once'修饰了click事件，表明当前button的点击事件只能触发一次counter计数的叠加 -->
        <button @click.once="counter+=1">监听点击次数(只能点击一次once)</button>
        <span>一共点击了{{counter}}次</span>
    </div>
    <br/>
    <!-- 复杂JavaScript代码的话，就需要给v-on的属性值绑定一个vue方法名了 :href  === v-bind:href-->
    <div id="app1">
        <a @click="Access" :href="address">跳转到我的CSDN博客</a>
    </div>
    <br/>
    <!-- 给v-on绑定方法的执行片段，行内执行JavaScript方法，并将当前DOM事件对象作为参数传递过去 -->
    <div id="app2">
        <button @click="say('like',$event)">say like</button>
        <button @click="say('love',$event)">say love</button>
    </div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })

    var app1 = new Vue({
        el: '#app1',
        data: {
            address: "http://blog.csdn.net/appleyk"
        },
        methods: {
            Access: function (event) {
                alert('欢迎访问我的CSDN博客：' + this.address)
                if (event) {
                    alert("DOM事件对象为标签：" + event.target.tagName)
                }
            }
        }
    })

    var app2 = new Vue({
        el: '#app2',
        methods: {
            say: function (message, event) {
                //如果原DOM事件对象是一个Button，其默认事件是submit，提交
                //调用事件的preventDefault方法，可以阻止点击按钮时提交表单或重新载入页面
                if (event) event.preventDefault();
                alert(message)
            }
        }
    })
</script>

</html>

一、使用v-on监听简单JavaScript代码

（1）DOM