事件处理-注册事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button type="button" v-on:click="message = message.split('').reverse().join('')">颠倒字符串顺序</button>
<button type="button" v-on:click="sayHello">调用 sayHello() 函数,并自动传入事件对象</button>
<button type="button" v-on:click="greeting('黄聪聪', $event)">调用 greeting() 函数,需要手动传入事件对象</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
data: {
message: 'Hello World!'
},
methods: {
sayHello: function (evt) {
console.log(evt)
console.log(this.message)
},
greeting: function (who, evt) {
console.log(evt)
console.log('你好,' + who, evt)
}
}
}).$mount('#app')
</script>
</body>
</html>
事件处理-修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<a href="" v-on:click.prevent="doThis">点我</a>
<form action="" method="post" @submit.prevent="onSubmit">
<p><label>用户名:<input type="text" name="username"></label></p>
<p><input type="submit" value="登录"></p>
</form>
<h1 @click="doThat">
<a href="" v-on:click.prevent.stop="doThis">点我</a>
</h1>
<h1 @click="doThat">
<a href="" v-on:click.prevent.stop.once="doThis">点我</a>
</h1>
<h1 @click.capture="doThat">
<a href="" v-on:click.prevent.capture="doThis">点我</a>
</h1>
<h1 @click.self="doThat" style="border: 1px solid green;">
<a href="" v-on:click.prevent="doThis" style="border: 1px solid red;">点我</a>
</h1>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
data: {
message: 'Hello World!'
},
methods: {
doThis: function (evt) {
console.log('doThis')
},
doThat: function (evt) {
console.log('doThat')
},
onSubmit: function (evt) {
console.log(this.message)
}
}
}).$mount('#app')
</script>
</body>
</html>
事件处理-键盘事件的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><input type="text" @keyup.13="onKeyup"></p>
<p><input type="text" @keyup.page-up="onKeyup"></p>
<p><input type="text" @keyup.enter="onKeyup"></p>
<p><input type="text" @keyup.ctrl.b="onKeyup"></p>
<p><input type="text" @keyup.e="onKeyup"></p>
<p><input type="text" @keyup.ctrl-b="onKeyup"></p>
</div>
<script src="./vue.js"></script>
<script>
Vue.config.keyCodes = {
e: 13,
'ctrl-b': [17, 66]
}
new Vue({
data: {
message: 'Hello World!'
},
methods: {
onKeyup: function (event) {
console.log(event.key)
console.log(event.keyCode)
console.log(event.target.value)
}
}
}).$mount('#app')
</script>
</body>
</html>
事件处理-系统修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><input type="text" @keyup.ctrl.b="onKeyup"></p>
<p><button type="button" @click.ctrl="onClick">按着 Ctrl 点我</button></p>
<p><input type="text" @keyup.ctrl.b.exact="onKeyup"></p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
data: {
message: 'Hello World!'
},
methods: {
onKeyup: function (event) {
console.log(event.key)
console.log(event.keyCode)
console.log(event.target.value)
},
onClick: function (event) {
console.log(event)
}
}
}).$mount('#app')
</script>
</body>
</html>
事件处理-鼠标修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><button type="button" @click.left="onClick">鼠标左键点击时触发</button></p>
<p><button type="button" @click.middle="onClick">鼠标滚轮点击时触发</button></p>
<p><button type="button" @click.right="onClick">鼠标右键点击时触发</button></p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
data: {
message: 'Hello World!'
},
methods: {
onClick: function (event) {
console.log(event)
}
}
}).$mount('#app')
</script>
</body>
</html>