v-on参数
在前端开发过程中,我们呢经常和用户交互,比如点击,键盘等事件,在Vue中监听事件用v-on指令。
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<!-- 语法糖写法 -->
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../..//js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
当通过methods中定义方法,以供@click调用时,需要注意参数问题。
- 如果该方法不需要额外参数,那么方法后的 ()可以不添加。(如果方法本身有一个参数,那么会默认将原生事件中的event参数传递进去)。
- 如果需要同时传入某个参数,同时需要event,可以通过$event传入事件。
<div id="app">
<!-- 事件调用的方法没有参数,括号可以省略-->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!-- 在事件定义时,写函数忽略了小括号,但是方法本身需要一个参数的,
这个时候Vue会默认将浏览器生成的event事件对象作为参数传入到方法-->
<button @click="btn2Click(123)">按钮2</button>
<button @click="btn2Click">按钮2</button>
<!-- 方法定义时,我们需要event对象,同时又需要其他参数 -->
<!-- 在调用方法,如何手动获取到浏览器参数的event对象:$event -->
<button @click="btn3Click(abc,$event)">按钮3</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
abc: 123
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log("-------", event);
},
btn3Click(abc, event) {
console.log("+++++", abc, event);
}
}
})
v-on修饰符
在某些情况下,我们拿到event的目的可能时进行一些事件处理。Vue提供了修饰符老帮助我们处理一些事件。
- .stop相当于调用event.stopPropagation()。
- .prevent 相当于调用event.preventDefault()。
- .{keyCode|keyAlias}-只当事件从特定键触发时才触发回调
- .once 只触发一次回调
<div id="app">
<!-- .stop修饰符的使用,阻止冒泡 -->
<div @click="divClick">
aaaa
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2. .prevent修饰符的使用 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick" @click="submitClick">
</form>
<!-- 3. .建通某个键盘的键帽 -->
<input type="text" @keyup.enter="keyUp">
<!-- 4..once修饰符的使用 -->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log("submitClick");
},
keyUp() {
console.log("keyUp");
},
btn2Click() {
console.log("btn2Click");
}
}
})