【Vue3 从入门到实战进阶式掌握完整知识体系】008-Vue语法基础：事件绑定

客官°小女子只卖身不卖艺 2023-10-03 08:40 25阅读 0赞

### 文章目录 ###

*   *  8、事件绑定
     *   *  基本使用
         *  运行结果
         *  绑定事件为表达式
         *  运行结果
         *  默认的event参数
         *  运行结果
         *  传参数
         *  运行结果
         *  传参数且获取默认的event参数
         *  运行结果
         *  一个事件执行多个函数
         *  运行结果
         *  事件修饰符stop
         *  运行结果
         *  其他时间修饰符参考
         *  鼠标修饰符、按键修饰符、系统修饰符参考文档

## 8、事件绑定 ##

### 基本使用 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            num: 0
          }
        },
        methods:{
         
          add(){
         
            this.num ++;
          }
        },
        template: `
            <div>
              {
          { num }}
              <button @click="add">加一</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612211149823.png][]

### 绑定事件为表达式 ###

> 不建议这么写

### 运行结果 ###

![image-20210612211342293.png][]

### 默认的event参数 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            num: 0
          }
        },
        methods: {
         
          // 当没有参数的时候默认存在一个 event 参数
          add(event) {
         
            console.log(event.target);
            this.num ++;
          }
        },
        template: `
            <div>
              {
          { num }}
              <button @click="add">加一</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612212227698.png][]

### 传参数 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            num: 0
          }
        },
        methods: {
         
          add(number) {
         
            this.num += number;
          }
        },
        template: `
            <div>
              {
          { num }}
              <button @click="add(5)">加5</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612212321697.png][]

### 传参数且获取默认的event参数 ###

> 传参数的话，默认的参数需要显式传入

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            num: 0
          }
        },
        methods: {
         
          add(number, event) {
         
            this.num += number;
            console.log(event.target)
          }
        },
        template: `
            <div>
              {
          { num }}
              <button @click="add(5, $event)">加5</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612212537779.png][]

### 一个事件执行多个函数 ###

> 函数必须带小括号，因此我们可以养成一个好习惯，只要绑定函数就带括号，这样也可以和属性有所区分！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: 'Hello World'
          }
        },
        methods: {
         
          say() {
         
            console.log("哈哈哈哈哈哈");
          },
          jump(){
         
            console.log("跳跳跳跳跳跳");
          }
        },
        template: `
            <div>
              {
          { message }}
              <button @click="say(), jump()">点我呀</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612213009962.png][]

### 事件修饰符stop ###

> 停止事件冒泡

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: 'Hello World'
          }
        },
        methods: {
         
          say() {
         
            console.log("哈哈哈哈哈哈");
          },
          doSth(){
         
            console.log("11111111111");
          }
        },
        // 我们在点击 button 的时候，其外层的 div 标签的
        // 点击事件也会执行，我们通过stop修饰符阻止事件对外冒泡
        template: `
            <div @click="doSth()">
              {
          { message }}
              <button @click.stop="say()">点我呀</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612213840925.png][]

### 其他时间修饰符参考 ###

<a @click.stop="doThis"></a>
    
    
    <form @submit.prevent="onSubmit"></form>
    
    
    <a @click.stop.prevent="doThat"></a>
    
    
    <form @submit.prevent></form>
    
    
    
    <div @click.capture="doThis">...</div>
    
    
    
    <div @click.self="doThat">...</div>
    
    
    <a @click.once="doThis"></a>
    
    
    
    
    <div @scroll.passive="onScroll">...</div>

### 鼠标修饰符、按键修饰符、系统修饰符参考文档 ###

<input @keyup.enter="submit" />
    
    https://v3.cn.vuejs.org/guide/introduction.html

[image-20210612211149823.png]: https://img-blog.csdnimg.cn/img_convert/be520d9fc22d65b33eebcf4dc3d3b8b4.png
[image-20210612211342293.png]: https://img-blog.csdnimg.cn/img_convert/f09a71a8e1cc676f03637e0e2b2d4787.png
[image-20210612212227698.png]: https://img-blog.csdnimg.cn/img_convert/b3f829e3869f76ff82b745d1379a4608.png
[image-20210612212321697.png]: https://img-blog.csdnimg.cn/img_convert/236b605556e3f88d3e900d8b0c7d8f99.png
[image-20210612212537779.png]: https://img-blog.csdnimg.cn/img_convert/7457dfc136eac2bb6f48903c6bd50012.png
[image-20210612213009962.png]: https://img-blog.csdnimg.cn/img_convert/f1d2a6a8b02b76b22f4d7ce54e7b29a7.png
[image-20210612213840925.png]: https://img-blog.csdnimg.cn/img_convert/fb333bdd60b3db7dc2ae2a6c49059c69.png