指令系统之事件指令
事件指令
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
v-on:click 可以缩写成@click
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="box">
<button v-on:click="handleClick1">点我1button>
<button @click="handleClick2">点我2button>
<button @click="handleClick3()">点我3-1(带括号)button>
<button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)button>
<button @click="handleClick4($event)">点我4(带事件参数)button>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
},
methods: {
handleClick1() {
console.log('点我1')
},
handleClick2() {
console.log('点我2')
},
handleClick3(a,b,c) {
console.log(a,b,c)
},
handleClick4(event) {
console.log(event)
},
}
})
script>
html>
