1.事件的基本使用
基本知识:
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上
3.method是中配置的函数,不再用箭头函数,否则this就不是vm了
4.methods中配置的函数,都是被vue所管理的函数 ,this的指向是 vm 或 组件实例对象
5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参
<div class="root">
<h1>欢迎来到{{address}}学习</h1>
<!--
v-on:当~时
click:点击
showInfo:调用该函数
-->
<button v-on:click = "showInfo1">点我弹窗</button>
<button v-on:click = "showInfo2(666,$event)">点我提示信息2(传参)</button>
<!-- 这里的 $event 就属于关键词,进行了占位
实参和$event的位置可以替换,当然下面的方法中的形参位置也得发生改变
-->
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
new Vue({
el:'.root',
data:{
address:'北京'
},
methods:{
showInfo1(event){
alert('同学你好!');
},
showInfo2(number,event){
console.log(number,event); //666 event
//console.log(this); //this指向vm
alert('同学你好!!');
}
}
})
</script>
vue中的事件修饰符
1.prevent:阻止默认事件
2.stop:阻止事件冒泡
3.once:事件只触发一次
<!-- prevent 阻止默认事件,这里是阻止a标签跳转-->
<a href="http://www.baidu.com" v-on:click.prevent="showInfo">点击事件</a>
<!-- stop 阻止事件冒泡,这里如果不阻止的话,就会触发两次showInfo-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- once 事件只触发一次,点击一次后不会再次触发-->
<button @click.once="showInfo">点我提示信息</button>
new Vue({
el:'.root',
data:{
},
methods:{
showInfo(e) {
alert('你好');
}
}
})
键盘事件
注意事项
keydown 按下去不用抬起来就触发事件
keyup 按下去后抬起来之后才会触发事件
1.vue中常用的按键别名
回车 => enter
删除 => delete (捕获 删除 和 退格 键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为a-b,如CapsLock为cap-lock
3.系统修饰键:ctrl,alt,shift,meta
(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
(2)配合keydown使用:正常触发事件,所以最好用keydown
<input type="text" placeholder="按下回车提示" @keydown.delete="showInfo">
<!-- 上面的代码 @keydown.enter 就是在按下回车之后才会触发之后的事件-->
<!-- 可以设置按下两个确定的键 -->
<input type="text" placeholder="按下回车提示" @keydown.enter.y="showInfo">
<!-- 对于上面没有直接提供的按键,比如CapsLock这个是两个单词,需要下面这种格式
,就是全部小写并且两个单词之间得用-分割-->
<input type="text" placeholder="按下CapLock触发" @keyup.caps-lock="showInfo">
<!-- 对于上面没有提供且一般的按键 如shift -->
<input type="text" placeholder="按下shift触发" @keydown.shift="showInfo">
const vm = new Vue({
el:'.root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e) {
console.log(e.target.value); //返回input中的值
}
}