事件監聽
ｖ－ｏｎ：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)">當前，只有你在敲回車時，纔會觸發。