VUE初学---事件处理 v-on:click、v-on:keyup
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
- 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
注：v-on:click 可缩写为 @click
监听事件
通过 v-on 指令监听 DOM 事件
<div id="app">
// 执行的时候会不停的加1
<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="num += 1">add</a>
<p>这是第{{ num }}点击</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true,
num:0
}
})
</script>
1、事件处理方法
有时候事件处理逻辑比较复杂，一般不会写在 v-on 指令中 ，因此需要接受一个调用的方法名
<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="add">add</a>
<p>这是第{{ num }}点击</p>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true,
num:0
},
methods:{
// event 是原生DOM事件 ,将 event 作为参数，通过这个event，可以获取到event.target，就是点击的对象等等属性。 event 可加可不加，需要时可以使用
add:function(event) {
this.num = this.num + 1
if(event){
console.log(event.target.tagName) // 输出 A
}
}
}
})
</script>
2、内联处理器的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法
// 输出 Hellow Lewis
<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="say('Lewis')">say</a>
// 输出 Hellow Imp
<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="say('Imp')">say</a>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
say:function(msg) {
console.log('Hellow' + msg)
}
}
})
</script>
say() 和上面的 add 对比 add 没括号的这个，直接就是函数名，say() 有括号的这个，实际是一条JS语句，有括号的这个就叫 内联处理器
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
<a href="javascript:void(0);" :class="{'link-click':isClick}" @click="warn('Form cannot be A yet.',$event)">warn</a>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
warn:function(msg,event) {
if (event){
console.log('我对钱没有兴趣') // 输出 我对钱没有兴趣
event.preventDefault()
}else{
console.log(msg)
}
}
}
})
</script>
3、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()，是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点(.)开头的指令后缀来表示的
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
1、阻止单击事件继续传播 .stop ：阻止冒泡
<div class="mr" @click="doDo">
// 在不加.stop修饰符时点击 a 控制台先输出 doTHis 后输出 doDo ，加了.stop 后只输出doTHis
<a href="javascript:void(0);" :class="{'link-click':isClick}" @click.stop="doThis">doThis</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
doDo:function() {
console.log('doDo')
},
doThis:function() {
console.log('doThis')
}
}
})
</script>
2、form 表单 提交事件不再重载页面 .prevent ：取消默认事件
// 提交事件不再重载页面
// 在没有 .prevent 时点击后，会刷新页面
<form @submit.prevent="onSubmit('请看时间')">
<p>{{ time }}</p>
<button>submit</button>
</form>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true,
time: new Date()
},
methods:{
onSubmit:function(msg) {
console.log(msg)
}
}
})
</script>
// 修饰符可以串联
<a href="javascript:void(0);" :class="{'link-click':isClick}" @click.stop.prevent="doThat">doThat</a>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
doThat:function() {
console.log('你好，小老弟')
}
}
})
</script>
3、添加事件监听器时使用事件捕获模式 .prevent
// 内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div @click.capture="doCaptureParent" style="width: 300px; height: 80px;background: #24C77E">
<a href="javascript:void(0);" :class="{'link-click':isClick}" @click.capture="doCaptureSon">doCaptureSon</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
doCaptureParent:function() {
console.log('捕获父级点击')
},
doCaptureSon:function() {
console.log('捕获子级点击')
}
}
})
</script>
4、.self
只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
// 点击修改文案颜色，并数组 DIV
<div @click="doSelf">
<div :class="{'link-click':isClick}">普通</div>
</div>
// 点击Doself无反应，将 doSelf 放在子级上，点击文案颜色发生改变 并数组 DIV
<div @click.self="doSelf">
<div :class="{'link-click':isClick}">Doself</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
doSelf(event){
console.log(event.target.tagName)
event.target.style.color = "#24C77E"
}
}
})
</script>
5、点击事件将只会触发一次 .once
<a href="javascript:void(0);" :class="{'link-click':isClick}" @click.once="doOnce">once</a>
<script>
var vm = new Vue({
el:'#app',
data:{
isClick:true
},
methods:{
doOnce:function() {
console.log('你好，小老弟')
}
}
})
</script>
6、.passive
passive这个修饰符会执行默认方法，通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。加上 passive 就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
滚动事件的默认行为 (即滚动行为) 将会立即触发 和 touchemove
.passive 修饰符尤其能够提升移动端的性能，特别是可以提升滑动的流畅性
<div @scroll.passive="onScroll">...</div>
注：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
3、按键修饰符
在监听键盘事件时，经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
// 监听键盘所有事件
<input @keyup="doDown">
// 监听 按键 enter
按enter:<input type="text" @keyup.enter="doEnter">
//
//
//
//
//
//
//
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doEnter:function(e) {
this.valText = e.target.value
console.log(this.valText)
},
doDown:function(e) {
// this.valText = e.target.value划水
// console.log(this.valText)
console.log('我按下了')
}
}
})
</script>
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
4、系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta
<div @click.ctrl="doDown">Ctrl</div>
<div @click.alt="doDown">Alt</div>
<div @click.shift="doDown">Shift</div>
<div @click.meta="doDown">Meta</div>
// 即使 Alt 或 Shift 被一同按下时也会触发
<button @click.ctrl="doDown">Alt+Shift</button>
// 有且只有 Ctrl 被按下的时候才触发
<button @click.ctrl.exact="doDown">ctrl</button>
// 没有任何系统修饰符被按下的时候才触发
<button @click.exact="doDown">someDown</button>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doDown:function(e) {
console.log('我按下了')
}
}
})
</script>
5、鼠标按钮修饰符
- .left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
再来听一首歌 《爱江山更爱美人》