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

最新推荐文章于 2022-09-07 22:58:43 发布

訾博ZiBo

最新推荐文章于 2022-09-07 22:58:43 发布

阅读量257

点赞数

分类专栏： Vue.js 文章标签： Vue.js 事件绑定事件处理事件修饰符参数传递

本文链接：https://blog.csdn.net/qq_29689343/article/details/118070556

版权

Vue.js 专栏收录该内容

110 篇文章 21 订阅

订阅专栏

文章目录

- 8、事件绑定

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>
  <!-- 引入Vue库 -->
  <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>

运行结果

绑定事件为表达式

不建议这么写

<!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>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        num: 0
      }
    },
    template: `
        <div>
          {{ num }}
          <button @click="this.num ++;">加一</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

默认的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>
  <!-- 引入Vue库 -->
  <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>

运行结果

传参数

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

传参数且获取默认的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>
  <!-- 引入Vue库 -->
  <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>

运行结果

一个事件执行多个函数

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

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

事件修饰符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>
  <!-- 引入Vue库 -->
  <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>

运行结果

其他时间修饰符参考

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发   -->
<!-- 而不会等待 `onScroll` 完成                   -->
<!-- 这其中包含 `event.preventDefault()` 的情况   -->
<div @scroll.passive="onScroll">...</div>

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

https://v3.cn.vuejs.org/guide/introduction.html

訾博ZiBo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue3 从入门到实战进阶式掌握完整知识体系】008-Vue语法基础：事件绑定

文章目录8、事件绑定基本使用运行结果绑定事件为表达式运行结果默认的event参数运行结果传参数运行结果传参数且获取默认的event参数运行结果一个事件执行多个函数运行结果事件修饰符stop运行结果其他时间修饰符参考鼠标修饰符、按键修饰符、系统修饰符参考文档8、事件绑定基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫