Vue中使用v-on来监听DOM事件执行JavaScript代码
直接监听事件
使用Vue时在v-on后写上监听的事件,其后可以跟着JavaScript代码,当监听的事件被触发时,就会执行其后的JavaScript代码
<div id="app">
<button v-on:click="count++">增加</button>
<p>{{count}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
count: 0
}
});
</script>
这里点击按钮count的数值就会不停增加
v-on的缩写
v-on可以使用@来代替
比如上面的代码可以改为
<button @click="count++">增加</button>
调用方法处理
有时候事件对应的操作太繁多,不可能全部都写在html里面,这个时候调用方法是一个好的选择
<div id="app">
<button @click="fn">按钮</button>
<!-- 等同于 -->
<button @click="fn()">按钮</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
fn() {
alert('this is vue');
}
}
});
</script>
调用方法时如果没有参数,可以不加括号。
对于有参方法,可以直接在内联中传入参数
<div id="app">
<button @click="fn('hello')">hello</button>
<button @click="fn('hi')">hi</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
fn(val) {
alert(val);
}
}
});
</script>
如果要在内联中访问DOM原生事件,可以使用$event作为参数传入方法。
<div id="app">
<button @click="fn($event)">获取鼠标位置</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
fn(event) {
alert(event.clientX);
}
}
});
</script>
事件修饰符
事件修饰符是用于对事件的处理,比如阻止冒泡,阻止默认行为,改为捕获的监听等,虽然这些内容也可以在函数内部处理,但是使用事件修饰符可以使得函数内部只需要处理相应的逻辑处理,不用去考虑DOM的内容。
- stop:阻止事件的冒泡
- prevent:阻止事件的默认行为
- capture:添加事件监听器时使用捕获模式
- self:事件只有在元素本身触发才有效,子元素中触发无效
- once:事件只会触发一次
stop
原本在冒泡的事件监听中,触发子元素的事件会向上触发父元素的事件,这里点击span标签本应触发父元素的点击事件,但是使用stop修饰符后就被阻止了。
<div id="app">
<div @click="div">div
<span @click.stop="span">span</span> // 只弹出一个alert
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
div() {
alert('div')
},
span() {
alert('span')
}
}
});
</script>
prevent
这里在点击a标签后本应该触发事件后跳转到百度页面的,但是加上了prevent后就没有跳转,默认事件被阻止了。submit的页面刷新也能被prevent阻止。
<div id="app">
<a href="http://www.baidu.com" @click.prevent="fn">超链接被阻止</a>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
fn() {
alert('你是离不开这里的')
}
}
});
</script>
capture
这里点击span标签本应先弹出‘div’后弹出‘span’,但是使用了capture变成了事件捕获之后,就会先弹出‘span’后弹出‘div’
<div id="app">
<div @click.capture="div">div
<span @click="span">span</span>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
div() {
alert('div')
},
span() {
alert('span')
}
}
});
</script>
self
这里点击span标签时由于事件冒泡,div1和div2两个点击事件都应该被触发,但是由于div2使用了self修饰符,所以通过子元素的冒泡不会触发其点击事件,所以点击span标签会弹出“span”和“div1”两个框,而点击div2时会弹出“div2”和“div1”两个框
<div id="app" @click="div1">
<div @click.self="div2">div2
<span @click="span">span</span>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
div1() {
alert('div1')
},
div2() {
alert('div2')
},
span() {
alert('span')
}
}
});
</script>
once
这里点击按钮msg本应一直上升,但是加上了once后,只会执行一次,即只是加到1就停止了
<div id="app">
<span>{{msg}}</span>
<button @click.once="add">增加</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 0
},
methods: {
add() {
this.msg++;
}
}
});
</script>
按键修饰符
keyCode监听
通过在事件后面使用.加上keyCode可以监测键值
<div id="app">
<input type="text" v-model="msg" @keyup.13="fn">
<!-- 回车键的键码为13 -->
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 0
},
methods: {
fn() {
console.log(this.msg);
}
}
});
</script>
这里在本文框中按下回车键就会触发fn方法
按键别名监听
记住所有keyCode很麻烦,在Vue中提供了按键别名
- enter
- tab
- delete (捕获 “删除” 和 “退格” 键)
- esc
- space
- up
- down
- left
- right
下面这段代码使用按键别名enter,和上面使用keyCode13结果是一样的。
<div id="app">
<input type="text" v-model="msg" @keyup.enter="fn">
<!-- 回车键的键码为13 -->
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 0
},
methods: {
fn() {
console.log(this.msg);
}
}
});
</script>
自定义按键别名
除了使用Vue提供的按键别名外,我们也能自己定义按键别名,使用Vue.config.keyCodes就能在全局定义按键别名。
下面这段代码将f2的键码对应定义了别名f2,当按下f2键时就会触发fn方法。
<div id="app">
<input type="text" v-model="msg" @keyup.f2="fn">
</div>
<script>
Vue.config.keyCodes.f2 = 113; // f2键码为113
let vm = new Vue({
el: "#app",
data: {
msg: 0
},
methods: {
fn() {
console.log(this.msg);
}
}
});
</script>