我觉得对原生js有了一定的了解,在vue中对于v-on的绑定还是比较容易理解。
首先v-on的事件监听,方法处理,内连处理器,我觉得就是DOM的点击事件,只是书写的方法上有一些差别。
事件监听:
官网例子:
<div id="example-1">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
事件处理:
就是点击事件的方法名,greet=func(){}写在methods里
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
}
}
})
内连处理器:
传参数。。。
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
事件修饰符:
在编程过程中,我们不可避免的会用到一些取消默认事件,取消冒泡事件等,vue为我们提供了相应的修饰符来简化操作。
.stop //阻止冒泡
.prevent //不重新加载
.capture //使用事件捕获(只有谷歌可以使用)
.self //元素本身触发的事件
.once //只触发一次
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
模式是一样的,但是有些常用的方法还是应该记住,或者有个印象,在编程的过程中可以省去很多繁琐的步骤,也使代码质量更高。当串联使用修饰符,要注意顺序!
键值修饰符:
在编程过程中,我们有时需要给特定的按键加上特定的方法响应,这时候就要用到键值修饰符了。vue为我们提供了一些常用的键值修饰符:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta(在不同的电脑上代表的按键有所不同)
.exact(精准定位,当与其他按键同时按下不触发)
鼠标:
.left
.right
.middle
我们还可以自己定义键值修饰符:
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
还可以这样使用:
<input @keyup.page-down="onPageDown">
通过@keyup.key = “”;