事件监听
ｖ－ｏｎ：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;
} 要用ｔｈｉｓ索引ｄａｔａ中的关键字。那么ｔｈｉｓ到底是谁呢？
当我们打印出来ｔｈｉｓ，他指代的是ｖｕｅ组件本身，就是在这个组件本身上去找你的状态。
接下来，我们做一些更深入的事情。先创建一个新的ｖｕｅ文件。这里简单说明下ｖｕｅ页面的三个基本标签。
承载ｖｕｅ视图的部分， ｔｅｍｐｌａｔｅ 标签，ｊｓ部分 ｓｃｒｉｐｔ标签，样式部分 ｓｔｙｌｅ标签。
注意的是，ｔｅｍｐｌａｔｅ只能有一个跟容器。ｓｃｒｉｐｔ里面装的是
里面加上 ｄａｔａ（）｛ｒｅｔｕｒｎ｛｝｝ 就完整了
直接上代码部分
<template>
<div class="tab1_wrap">
</div>
</template>
<script>
export default {
data(){
return{
}
}
</script>
<style >
</style>
谈到了，导出，我们就说一说一个组件怎么能被外部所访问。当它需要被访问时，在访问者组件里的ｓｃｒｉｐｔ写上 ｉｍｐｏｒｔ 组件名 ｆｒｏｍ ＂路径＂ 我们千万不要写到，ｅｘｐｏｒｔ 里面，因为那是要被导出的，引入的不需要被导出。当然，我们还要绑定他，ｃｏｍｐｒｎｅｎｔｓ：｛组件名｝
下面我，我们用监听传参。
事件参数
<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;
}
} 因为ｖｕｅ使用的虚拟ｄｏｍ，这些标签都是ｊｓｘ对象，他们所绑定的数据，可以用上面的方式获取。
这里的数据，不用拘泥标签的限制。
参数倒是传递过来了，可是ｅｖｅｎｔ对象呢？事件默认的对象咋办？只需要在函数里 增加 ｅｖｅｎｔ 这个参数就可以了。（Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态）
<li v-on:click="getname(names.name,$event)" v-for="names in name">{{names.name}}}</li>ｅｖｅｎｔ 对象，在函数那边被传递之前，一定要在标签里先＄定义一下，要不会显示未定义。
事件修饰符
ｓｔｏｐ 阻止事件冒泡
ｐｒｅｖｅｎｔ 阻止默认事件
ｏｎｃｅ 只生效一次
<li v-on:click.stop="getname(names.name,$event)" v-for="names in name">{{names.name}}}</li>按键修饰符
监听键盘事件，ｋｅｙｕｐ是我们从前的方法，现在我们用绑定他
<input type="text" v-on:keyup="getname($event)"> 控制台会显示这段 KeyboardEvent {isTrusted: true, key: “F1”, code: “F1”, location: 0, ctrlKey: false, …}
这里，ｖｕｅ为我们提供了常用的键位监听，用法同事件修饰符
．ｅｎｔｅｒ
．ｔａｂ
．ｄｅｌｅｔｅ（捕获 “删除”和“退格”键）
．ｅｓｃ
．ｓｐａｃｅ
．ｕｐ
．ｄｏｗｎ
．ｌｅｆｔ
．ｒｉｇｈｔ
<input type="text" v-on:keyup.enter="getname($event)">当前，只有你在敲回车时，才会触发。