事件监听
v-on:click=“函数或语句”
例如
<ul >
<li >{{num}}<br></li>
<button v-on:click="num+=1">Num++</button>
</ul>
实现最简单的事件监听。
当然,在现实生活中,你的事件不可能是这么简单的,所以,我们来一段更复杂的事件监听。
<button v-on:click="handlerClick">Num++</button>
methods:{
handlerClick(){
alert("我是事件")
}
}
上面代码,我们在methods里创造了一个函数,methods是一个与data同级的对象,它里面的函数也都是对象。这里的methods的s带表很多个的意思。函数在监听使用时不需要加括号,加括号就执行了。
我们的事件也可以改变状态:
handlerClick(){
this.show=!this.show;
}
要用this索引data中的关键字。那么this到底是谁呢?
当我们打印出来this,他指代的是vue组件本身,就是在这个组件本身上去找你的状态。
接下来,我们做一些更深入的事情。先创建一个新的vue文件。这里简单说明下vue页面的三个基本标签。
承载vue视图的部分, template 标签,js部分 script标签,样式部分 style标签。
注意的是,template只能有一个跟容器。script里面装的是
里面加上 data(){return{}} 就完整了
直接上代码部分
<template>
<div class="tab1_wrap">
</div>
</template>
<script>
export default {
data(){
return{
}
}
</script>
<style >
</style>
谈到了,导出,我们就说一说一个组件怎么能被外部所访问。当它需要被访问时,在访问者组件里的script写上 import 组件名 from "路径" 我们千万不要写到,export 里面,因为那是要被导出的,引入的不需要被导出。当然,我们还要绑定他,comprnents:{组件名}
下面我,我们用监听传参。
事件参数
<ul>
<li v-on:click="getname(names.name)" v-for="names in name">{{names.name}}}</li>
</ul>
<p>额外的内容{{biu}}</p>
methods:{
getname(data){
this.biu=data;
}
}
因为vue使用的虚拟dom,这些标签都是jsx对象,他们所绑定的数据,可以用上面的方式获取。
这里的数据,不用拘泥标签的限制。
参数倒是传递过来了,可是event对象呢?事件默认的对象咋办?只需要在函数里 增加 event 这个参数就可以了。(Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态)
<li v-on:click="getname(names.name,$event)" v-for="names in name">{{names.name}}}</li>
event 对象,在函数那边被传递之前,一定要在标签里先$定义一下,要不会显示未定义。
事件修饰符
stop 阻止事件冒泡
prevent 阻止默认事件
once 只生效一次
<li v-on:click.stop="getname(names.name,$event)" v-for="names in name">{{names.name}}}</li>
按键修饰符
监听键盘事件,keyup是我们从前的方法,现在我们用绑定他
<input type="text" v-on:keyup="getname($event)">
控制台会显示这段 KeyboardEvent {isTrusted: true, key: “F1”, code: “F1”, location: 0, ctrlKey: false, …}
这里,vue为我们提供了常用的键位监听,用法同事件修饰符
.enter
.tab
.delete(捕获 “删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input type="text" v-on:keyup.enter="getname($event)">
当前,只有你在敲回车时,才会触发。