一、事件绑定

语法：v-on:事件名="函数/方法"

实例：

<button v-on:click="login">登录</button>

语法糖形式：@click="login"

实例：

<button @click="login">登录</button>

二、事件处理方法

1、绑定方法

2、使用事件对象

将event作为参数进行传递

<div id="app">
   <button v-on:click="getTagName">测试</button>
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
        },
        methods:{
           getTagName:function(event){
                if(event){
                    alert('事件名'+event.target.tagName);
                }
           }
        }
    }).mount('#app')
</script>

3、使用内联语句

<div id="app">
      <button v-on:click="show('吉林省长春市')">显示地址</button>
      <p>{{address}}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data(){
                return {
                    address:''
                }
            },
            methods:{
               show:function(info){
                    this.address = "您的地址是"+info;
               }
            }
        }).mount('#app')
    </script>

  如果在内联语句中需要获取原生DOM事件对象,可以向方法中传入一个特殊变量$event 

<div id="app">
        <a href="" v-on:click="show('欢迎访问网站',$event)">{{name}}</a>
    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data(){
                return {
                    name:'好好学习'
                }
            },
            methods:{
               show:function(message,e){
                    e.preventDefault();
                    alert(message);
               }
            }
        }).mount('#app')
    </script>

方法之间的调用