【Vue 从入门到实战进阶式掌握完整知识体系】008

2025-07-27 15:23:37

【Vue 从入门到实战进阶式掌握完整知识体系】008 8、事件绑定基本使用代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&q

【Vue 从入门到实战进阶式掌握完整知识体系】008

8、事件绑定

基本使用

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        num: 0
      }
    },
    methods:{
      add(){
         ++;
      }
    },
    template: `
        <div>
          {{ num }}
          <button @click="add">加一</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061221114982.png

绑定事件为表达式

不建议这么写

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106122114229.png

默认的event参数

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        num: 0
      }
    },
    methods: {
      // 当没有参数的时候默认存在一个 event 参数
      add(event) {
        cole.log();
         ++;
      }
    },
    template: `
        <div>
          {{ num }}
          <button @click="add">加一</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612212227698.png

传参数

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        num: 0
      }
    },
    methods: {
      add(number) {
         += number;
      }
    },
    template: `
        <div>
          {{ num }}
          <button @click="add(5)">加5</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061221221697.png

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

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        num: 0
      }
    },
    methods: {
      add(number, event) {
         += number;
        cole.log()
      }
    },
    template: `
        <div>
          {{ num }}
          <button @click="add(5, $event)">加5</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061221257779.png

一个事件执行多个函数

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      say() {
        cole.log("哈哈哈哈哈哈");
      },
      jump(){
        cole.log("跳跳跳跳跳跳");
      }
    },
    template: `
        <div>
          {{ message }}
          <button @click="say(), jump()">点我呀</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061221009962.png

事件修饰符stop

停止事件冒泡

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>
  ct app = ({
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      say() {
        cole.log("哈哈哈哈哈哈");
      },
      doSth(){
        cole.log("11111111111");
      }
    },
    // 我们在点击 button 的时候，其外层的 div 标签的
    // 点击事件也会执行，我们通过stop修饰符阻止事件对外冒泡
    template: `
        <div @click="doSth()">
          {{ message }}
          <button @click.stop="say()">点我呀</button>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061221840925.png

其他时间修饰符参考

代码语言：javascript代码运行次数：0运行复制

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @="doThis">...</div>

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

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

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

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

代码语言：javascript代码运行次数：0运行复制

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

.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除语法vue基础入门事件

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200262.html

推荐阅读

留言与评论（共有 20 条评论）

本站网友路虎suv	13分钟前发表
系统修饰符参考文档代码语言：javascript代码运行次数：0运行复制<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input @="submit" /> .html本文参与腾讯云自媒体同步曝光计划
本站网友陶陶居	29分钟前发表
原始发表：2025-01-06
本站网友生姜的功效	23分钟前发表
按键修饰符
本站网友微信自己退出	14分钟前发表
0 } }
本站网友伯克纳	19分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { num
本站网友男人补品	11分钟前发表
默认的参数需要显式传入代码语言：javascript代码运行次数：0运行复制<!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
本站网友冬瓜排骨汤的功效	18分钟前发表
methods
本站网友苦荞茶功效	29分钟前发表
` <div> {{ num }} <button @click="add(5
本站网友整形行业	11分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { num
本站网友围脖的戴法	1分钟前发表
$event)">加5</button> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-2021061221257779.png一个事件执行多个函数函数必须带小括号
本站网友世博展览馆	14分钟前发表
methods
本站网友长江经济带发展规划纲要	25分钟前发表
'Hello World' } }
本站网友张含	11分钟前发表
其外层的 div 标签的 // 点击事件也会执行
本站网友博彩评级	14分钟前发表
template
本站网友卓越购书	29分钟前发表
按键修饰符
本站网友江苏开元医药	2分钟前发表
0 } }
本站网友 databasemetadata	9分钟前发表
只要绑定函数就带括号
本站网友立体车库	9分钟前发表
'Hello World' } }
本站网友新疆大雪	25分钟前发表
` <div> {{ num }} <button @click=" ++;">加一</button> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-202106122114229.png默认的event参数代码语言：javascript代码运行次数：0运行复制<!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

【Vue 从入门到实战进阶式掌握完整知识体系】008