八、事件监听（一）

1、v-on 的基本使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../Js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
          <h3>{{counter}}</h3>
          <button v-on:click="counter++">+</button>
          <button v-on:click="counter--">-</button>
 
          <p>调用methods方法</p>
          <button v-on:click="increment()">+</button>
          <button v-on:click="transment()">-</button>
 
          <!-- //v-on的语法糖 -->
          <p>语法糖写法</p>
          <button @click="increment()">+</button>
          <button @click="transment()">-</button>
        </div>
        <script>
          const app = new Vue({
            el:"#app",
            data:{
              counter:0
            },
            methods:{
              increment(){
                this.counter++;
              },
              transment(){
                this.counter--;
              }
            }
          });
        </script>
    </body>
</html>

2、v-on 的参数传递

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../Js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
          <!-- 事件调用的方法没有参数 -->
          <button @click="btn1Click">按钮1</button>
 
          <!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,
               这个时候，浏览器会默认将浏览器生成的event事件对象作为参数传入到方法 -->
          <!-- <button @click="btn2Click(123)">按钮2</button> -->
          <!-- <button @click="btn2Click()">按钮2</button> -->
          <button @click="btn2Click">按钮2</button>
 
          <!-- 在函数定义时，我们需要event对象，同时又需要其他参数 -->
          <!-- 在调用方式，如何手动的获取到浏览器参数的event对象：$event-->
          <button @click="btn3Click(123,$event)">按钮3</button>
 
          
        </div>
        <script>
          const app = new Vue({
            el:"#app",
            data:{
            },
            methods: {
              btn1Click(){
                console.log("btn1Click");
              },
              btn2Click(event){
                console.log("--------------", event);
              },
              btn3Click(abc,event){
                console.log("--------------", abc , event);
              }
            }
          });
        </script>
    </body>
</html>

　　

posted @   搬砖工具人  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
·  九、事件监听（二 v-on 修饰符）
·  十三 v-model双向绑定
·  VUE基础03-事件监听
·  前端学习-vue学习003-事件监听
·  Vue 事件的基本使用
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手