1 事件处理
1.1 点击事件
javascript
<body>
<div id="root">
<h1>姓名： {{ name }}</h1>
<h1>地址： {{ address }}</h1>
<!-- <button v-on:click="showInfo">提示信息</button> -->
<!-- 简写形式 -->
<button @click="showInfo1">提示信息1(不传参)</button>
<button @click="showInfo2($event, 66)">提示信息2(传参)</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo1(event) {
// alert('同学你好！')
console.log(event.target.tagName)
console.log(this) // 此处的this是vm
},
showInfo2(event, number) {
console.log(event.target.tagName)
console.log(number)
}
}
})
</script>
</body>2 事件修饰符
2.1 prevent 阻止默认事件
javascript
<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo(e) {
alert('同学你好！')
// e.preventDefault() // 阻止默认行为 -> vue中有简洁的写法 @click.prevent
}
}
})
</script>2.2 stop 阻止事件冒泡
javascript
<div class="demo1" @click="showInfo1">
<button @click.stop="showInfo1">点我提示信息</button>
</div>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo1(e) {
alert('同学你好 1111')
// e.stopPropagation() // 阻止事件冒泡 -> vue中有简洁的写法 @click.stop
},
}
})
</script>2.3 once 事件只触发一次
javascript
<button @click.once="showInfo2">点我提示信息</button>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo2(e) {
alert('同学你好 2222')
},
}
})
</script>2.4 capture 使用事件的捕获模式, 正常在冒泡阶段处理事件，通过这个可以在捕获阶段处理事件
javascript
<div class="demo1" @click.capture="showInfo3(1)">
<button @click="showInfo3(2)">点我提示信息</button>
</div>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo3(msg) {
console.log(msg) // 先1后2
// 原本在冒泡阶段处理事件，应是先输出2，再输出1
},
}
})
</script>2.5 self 只有event.target是当前操作的元素时才触发事件
javascript
<!-- 在下述中，因为当前操作的元素是button,所以不触发div -->
<div class="demo1" @click.self="showInfo4">
<button @click="showInfo4">点我提示信息</button>
</div>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
showInfo4(e) {
console.log(e.target) // <button>点我提示信息</button>
},
}
})
</script>2.6 passive 事件的默认行为立即执行， 无需等待事件回调执行完毕
javascript
<!-- @scroll 为滚动条滚动 -->
<!-- <ul @scroll="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> -->
<!-- @wheel 为鼠标滚轮滚动 但是滚到最后的位置，仍然触发 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
},
methods: {
demo() {
console.log('滚动了')
}
}
})
</script>3 键盘事件
javascript
<body>
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<!-- CapsLock 切换大小写键， 写法需要用斜杠连接才有效果 -->
<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
</div>
<script>
// Vue.config.keyCodes.huiche = 13 // 定义了一个回车别名按键
const vm = new Vue({
el: '#root',
data: {
name: 'Vue'
},
methods: {
showInfo(e) {
// if (e.keyCode !== 13) return 传统做法
console.log(e.target.value)
// console.log(e.key, e.keyCode)
}
}
})
</script>
</body>总结：
1.Vue中常用的按键别名：
回车 => enter
删除 => delete （捕获"删除" 和 "退格"键）
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
Vue未提到别名的按键，可以使用按键原始的Key值绑定，但注意用短横线连接
系统修饰键（用法特殊）：ctrl, shfit, alt, win/meta
(1).这几个键配合keyup使用：按下修饰键，再按下其他键，随后释放其他键，事件才被触发（想要指定特定的键可以， 比如指定y： @keyup.ctrl.y）
(2).配合keydown使用：正常触发事件
4.也可以使用keyCode去指定具体的按键（不推荐）
- Vue.config.keyCodes.自定义键名 = 键码 可以去定制按键别名