Vue学习[事件监听]

最新推荐文章于 2022-08-02 19:42:20 发布

-易拉罐

最新推荐文章于 2022-08-02 19:42:20 发布

阅读量270

点赞数

分类专栏： vue 测试开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u012765977/article/details/122179514

版权

测试开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

事件监听

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{counter}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',
      counter: 0

    },
    methods: {
      increment() {
        this.counter ++
      },
      decrement() {
        this.counter--
      }
    }
  })
</script>
</body>
</html>

事件监听参数传递

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--方法不需要参数-->
  <button @click="btn1Click">按钮1</button>
  <button @click="btn1Click()">按钮1</button>
  <!--在事件定义时, 调用方法省略了小括号, 但是方法本身需要一个参数, 这时vue会默认将浏览器产生的event
  事件对象多为参数传入到方法
  -->
  <button @click="btn2Click">按钮2</button>
  
    <!--事件传递-->
  <button @click="btn3Click('abcd', $event)">按钮3</button>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',

    },
    methods: {
      btn1Click() {
        console.log("btn1Click");
      },
      btn2Click(abc){
        console.log(abc);
      },
      btn3Click(abc, event){

      }
    }
  })
</script>

</body>
</html>

事件修饰符

@click.stop 阻止事件冒泡
@click.prevent 阻止默认事件提交
...

-易拉罐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习[事件监听]

事件监听<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{counter}}</h2> <button @click="increment">+</but
复制链接

扫一扫

专栏目录