Day5目录
前言
在前端开发中,我们需要经常和用户交互,这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等 在vue中使用v-on指令进行事件监听一、v-on 事件监听
- v-on就是用于绑定事件的
v-on的基本使用如下:
<div id="hey">
<h2>{{counter}}</h2>
<button v-on:click="increment">+</button>
<!-- 语法糖 v-on: -> @ -->
<button v-on:click="decrement">-</button>
</div>
<script src="../vue.js"></script>
<script>
//ES6中 let(变量)/const(常量)
const app = new Vue({
el: '#hey', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>
按"+“就会加1,按”-"就会减1
二、v-on 参数问题
1.情况一:methods的方法有参数,传值
<button @click="msg('lhs')">传值</button>
methods:{
msg(event){
console.log(event);//输出的lhs
}
}
@click="msg(‘lhs’)"传值时必须加上单引号,不加就传data里的参数
2.情况二:methods的方法有参数,但没有传值
<button @click="msg">传值</button>
methods:{
msg(event){
console.log(event);//输出的event
}
}
返回的是event(Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态)
3.情况三:methods的方法有参数,传值同时也要event
<button @click="msg">传值</button>
methods:{
msg(event){
console.log(event);//输出的event
}
}
返回的是event(Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态)
三、v-on 的修饰符
1 .stop :表示停止冒泡事件
<div id="hey">
<!-- 1. stop修饰符的使用-->
<div @click=" divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script src="../vue.js"></script>
<script>
//ES6中 let(变量)/const(常量)
const app = new Vue({
el: '#hey', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
btnClick(){
console.log("btnClick");
},
divClick(){
console.log("divClick");
}
}
})
</script>
上述代码停止了divClick冒泡
2 .prevent :阻止默认行为
<div id="hey">
<!-- 2. prevent修饰符的使用-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick" >
</form>
</div>
<script src="../vue.js"></script>
<script>
//ES6中 let(变量)/const(常量)
const app = new Vue({
el: '#hey', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
submitClick(){
console.log("submitClick");
}
}
})
</script>
上述代码阻止了submit行为的执行
3 监听某个键盘的键帽
<div id="hey">
<!-- 3. 监听某个键盘的键帽-->
<input type="text" @keyup="keyUp">
</div>
<script src="../vue.js"></script>
<script>
//ES6中 let(变量)/const(常量)
const app = new Vue({
el: '#hey', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
keyUp(){
console.log("keyUp");
}
}
})
</script>
4 .native 暂时略
5 .once只触发一次回调
<div id="hey">
<!-- 4. .once修饰符的使用-->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../vue.js"></script>
<script>
//ES6中 let(变量)/const(常量)
const app = new Vue({
el: '#hey', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
btn2Click(){
console.log("btn2Click");
}
}
})
</script>
参考:
https://www.cnblogs.com/bushui/p/12207926.html
https://www.bilibili.com/video/BV15741177Eh?p=33&spm_id_from=pageDriver