vue里面的事件监听

最新推荐文章于 2024-05-13 18:00:50 发布

新手小白请求出战！

最新推荐文章于 2024-05-13 18:00:50 发布

阅读量562

点赞数 1

分类专栏：前端笔记文章标签： javascript html5 vue.js es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109643265

版权

1.v-on的基本使用

  <body>
        <div id="app">
            <h2>{
  {counter}}</h2>
            <!-- 第一种写法 -->
            <!-- <button v-on:click="counter++">+</button>
            <button v-on:click="counter--">-</button> -->
            <!-- 第二种写法 -->
            <!-- <button v-on:click="increment">+</button>
            <button v-on:click="decrement">-</button> -->
           <!-- 第三种写法 语法糖写法 -->
           <button @click="increment">+</button>
           <button @click="decrement">-</button>
        </div>
        <script src="../vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    counter:0
                },
                methods:{
                    //不写function是一种增强写法
                    increment(){
                       this.counter++;
                    },
                    decrement(){
                       this.counter--;
                    }
                }
            })
        </script>
    </body>

2.v-on的参数问题


<body>
    <div id="app">
        <!-- 事件调用的方法没有参数 -->
        <button @click="btnClick()">按钮1</button>
        <button @click="btnClick">按钮1</button>
        <button @click="btn2Click(123)">按钮2</button>
        <!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法函数中 -->
        <button @click="btn2Click">按钮2</button>
        
        <!-- 在方法定义时，我们需要event对象，同时需要其他参数 -->
        <!-- 在调用方式，如何手动的获取浏览器参数的event的对象:$event -->

最低0.47元/天解锁文章

新手小白请求出战！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue里面的事件监听

1.v-on的基本使用 <body> <div id="app"> <h2>{{counter}}</h2>  <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--"&
复制链接

扫一扫