Vue基础知识(四) - 事件绑定

Vue要绑定事件需要使用 "v-on" 这个指令
比如我们要使用点击事件,可以这样书写:
<button v-on:click="事件方法">按钮</button>

Vue的事件绑定包括以下内容:

• (1) 基本写法与语法糖
• (2) 绑定事件如何传递参数
• (3) 绑定事件的修饰符

(1) 基本写法与语法糖

• 1.最基本的写法
  最基本的写法是在一个标签元素上写上 ' v-on:事件类型="事件方法" ', 比如:
注意:事件类型前面不需要携带on!

<button v-on:click="btnClick">按钮</button>

• 2.语法糖写法(重点掌握)
  语法糖的写法是将 "v-on:" 改为 "@"

<button @click="btnClick">按钮</button>

• 3.绑定的方法的位置, 也可以写成一个表达式,但不推荐使用!

<button @click="console.log('按钮发生了点击')">按钮</button>

• 4.绑定多个方法,但不推荐使用!

<div v-on="{ click: divClick, mousemove: divMousemove }">我是div</div>
 // 或
<div @="{ click: divClick, mousemove: divMousemove }">我是div</div>

(2) 绑定事件如何传递参数

• 1.在事件方法处不写括号时,默认传入的是事件对象event

<button @click="btn1Click">按钮1</button>

const app = Vue.createApp({
  // methods: option api
  methods: {
    // 1.默认参数: event对象
    btn1Click(event) {
      console.log('btn1Click', event);
    }
});

app.mount('#app');

点击后效果如下:

image.png

总结: 在绑定事件的时候, 没有传递任何参数, 那么event对象会被默认传递进来
注意: 不能方法后面不能携带括号, 不然获取到的event对象是undefined!

• 2.只传递参数

<button @click="btn2Click('zhangsan', age)">按钮2</button>
// 1.创建app
const app = Vue.createApp({
  // data: option api
  data() {
    return {
      age: 18
    }
  },
  // methods: option api
  methods: {
    // 2.明确的参数
    btn2Click(name, age) {
      console.log('btn2Click', name, age);
    }
  }
});

app.mount('#app');

点击效果如下:

image.png

注意: 传递的参数可以来着data中的变量

• 3.传递自己的参数和event对象
  注意: 如果要在模板中想要明确的获取event对象, 需要要在实参中传入"$event"

<button @click="btn3Click('why', age, $event)">按钮3</button>

const app = Vue.createApp({
  // data: option api
  data() {
    return {
      age: 18
    }
  },
  // methods: option api
  methods: {
    btn3Click(name, age, event) {
      console.log('btn3Click', name, age, event);
    }
  }
});

app.mount('#app');

点击效果如下:

image.png

(3) 绑定事件的修饰符

v-on是支持修饰符的，修饰符相当于对事件进行了一些特殊的处理：
修饰符如下(了解即可):

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
• .once - 只触发一次回调。
• .left - 只当点击鼠标左键时触发。
• .right - 只当点击鼠标右键时触发。
• .middle - 只当点击鼠标中键时触发。
• .passive - { passive: true } 模式添加侦听器

 <div @click="divClick">
    <!-- 阻止冒泡 -->
    <button @click.stop="btnClick">按钮</button>
 </div>
// 1.创建app
const app = Vue.createApp({
  // data: option api
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    btnClick() {
      console.log('btnClick');
    },
    divClick() {
      console.log('divClick');
    }
  }
});

app.mount('#app');

没有写入".stop"的效果如下:

image.png
写入".stop"后,阻止了冒泡, 效果如下:
image.png

以上就是事件绑定的全部内容,谢谢观看!