Vue 08 - 事件处理_vue incrementcounter-CSDN博客

本文链接：https://blog.csdn.net/m0_53753920/article/details/129908909

前言

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。

v-on指令的基本用法

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="showmessage">click</button>
</div>

v-on指令的缩写语法

注： v-on:click 的用法与@click的用法是一致的，后者是省略的用法。

<button @click="doSomething">Click me</button>

v-on监听事件并传递参数

如果只传参，不穿event，会丢失event时间，此时我们可以通过$event将event参数一起传递。

<button v-on:click="doSomething('hello', $event)">Click me</button>

methods介绍

当你创建一个 Vue 实例时，你可以在其选项对象中定义一个 methods 对象。该对象可以包含一组方法，这些方法可以在 Vue 实例中使用。如在这段html中，你需要在vue实力里的methods方法中定义一个incrementCounter的方法去处理事件。

<div id="app">
  <button v-on:click="incrementCounter">Click me</button>
  <p>Counter: {{ counter }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    incrementCounter: function() {
      this.counter++;
    }
  }
});

需求描述

1. 当点击按钮1时候，出现一个弹框，如你好。

2. 当点击按钮2时候，出现一个弹框告诉学生学号，如你好，你的学号是66.

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来{{name}}一起学习</h2>
    <button v-on:click="showInfo1">click hello</button>
    <button v-on:click="showInfo2($event,66)">click student id</button>
</div>

</body>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    const vm = new Vue({
        el:'#root',
        data:{
            name:'西湖区'
        },
        //方法里不需要数据代理，单独存放。
        methods:{
            showInfo1(event){
                alert(`你好啊`)
            },
            showInfo2(event, number){
                alert(`你好, 你的学号是${number}！`)

            },
        }

    })
</script>
</html>