HMVue2.3.2【(3)事件绑定指令】
1 事件绑定指令
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>Documenttitle>
head>
<body>
<div id="app">
<p>count的值是{{count}}p>
<button v-on:click="add">+1button>
<button v-on:click="sub">-1button>
<button @click="add2(2)">+2button>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 0,
},
// methods的作用：定义事件的处理函数
methods: {
add: function(){
console.log('+1')
// console.log(vm)
// vm.count += 1
// console.log(vm === this) //true,在 methods 处理函数中，this 就是 new 出来的 vm 实例对象
this.count += 1
},
//简写（推荐）
sub(){
console.log('-1')
// vm.count -= 1
this.count -= 1
},
add2(n){
console.log('+' + n)
this.count += n
}
},
});
script>
body>
html>
2 事件对象$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>Documenttitle>
head>
<body>
<div id="app">
<p>count的值是{{count}}p>
<button @click="add(1)">+nbutton>
<button @click="add2">+nbutton>
<button @click="add3(1)">+nbutton>
<button @click="add4(1, $event)">+nbutton>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 0,
},
methods: {
add(n){ //n是传进来的参数
this.count += n
},
add2(e){ //此时e是事件对象
this.count += 1
console.log(e)
if(this.count%2 === 0){
e.target.style.backgroundColor = 'red'
}else{
e.target.style.backgroundColor = ''
}
},
add3(e){ //此时e是传进来的参数
this.count += e
console.log(e)
},
add4(n,e){ //n是传进来的参数，e是事件对象
this.count += n
console.log(e)
},
},
});
script>
body>
html>
3 事件修饰符
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>Documenttitle>
head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click="show1">跳转到百度1a>
<a href="http://www.baidu.com" @click="show2">跳转到百度2a>
<a href="http://www.baidu.com" @click.prevent="show3">跳转到百度3a>
<hr>
<div style="height: 150px; background-color: orange; padding-left: 100px; line-height: 150px;" @click="divHandler">
<button @click.stop="btnHandler">按钮button>
div>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
show1(){
console.log('a被点击了')
//点击超链接时：能够正常打印，但很快会跳转到百度首页，进入输出百度首页的一些打印信息
},
show2(e){
e.preventDefault() //阻止默认行为
console.log('a被点击了')
//点击超链接时：能够正常打印，不会跳转到百度首页
},
show3(){
console.log('a被点击了')
//点击超链接时：能够正常打印，不会跳转到百度首页
},
btnHandler(){
console.log('btnHandler')
},
divHandler(){
console.log('divHandler')
}
}
})
script>
body>
html>
(29条消息) 事件冒泡（快速理解）_bxz0729的博客-CSDN博客_事件冒泡
浅谈JS事件冒泡 - 全凭一口仙气儿活着 - 博客园 (cnblogs.com)
4 按键修饰符
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>Documenttitle>
head>
<body>
<div id="app">
<input type="text" @keyup="clearInput1">
<input type="text" @keyup.esc="clearInput2">
<input type="text" @keyup.esc="clearInput3" @keyup.enter="commintAJAX">
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
clearInput1(){
console.log('触发了clearInput1方法')
},
clearInput2(){
console.log('触发了clearInput2方法')
},
clearInput3(e){
e.target.value = ''
},
commintAJAX(){
console.log('触发了commintAJAX方法')
}
}
})
script>
body>
html>