<script src="../libs/vue.js"></script>
<div id="app">
? ? <!--v-on：XXX? 完整的語法-->
? ? <button v-on:click="showAlert">按鈕</button>
? ? <!--v-on：XXX? 縮寫@? 語法糖-->
? ? <!--v-on：XXX? 動態(tài)參數(shù)@[xxx]="xxx"-->
? ? <button @click="showAlert()">按鈕</button>
? ? <br>
? ? <button @click="say('hello')">帶參數(shù)的按鈕</button>
? ? <!--訪問原始的dom事件-->
? ? <button @click="showLog('原始事件點(diǎn)擊',$event)" name="Button">獲取原始事件的按鈕</button>
? ? <button @click="showEvent($event)" name="Btn">獲取原始事件的按鈕</button>
? ? <div @click="divClick">
? ? ? ? <!--stop 修飾符 阻止冒泡事件-->
? ? ? ? <button @click.stop="btnClick">修飾符stop按鈕</button>
? ? </div>
? ? <form action="baidu">
? ? ? ? <!--prevent 修飾符 阻止默認(rèn)事件-->
? ? ? ? <button @click.prevent="submitClick">修飾符prevent按鈕</button>
? ? </form>
? ? <!--once 修飾符 一次的點(diǎn)擊事件-->
? ? <button @click.once="onceClick">只允許點(diǎn)擊一次的按鈕</button>
? ? <!--keyup enter? enter鍵的監(jiān)聽-->
? ? <input type="text" @keyup.enter="keyUp">
</div>
<script>
? ? var vue = new Vue({
? ? ? ? el: "#app",
? ? ? ? data: {
? ? ? ? ? ? message: 'hello vue'
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? keyUp(){
? ? ? ? ? ? ? console.log("=====keyUp=====")
? ? ? ? ? ? },
? ? ? ? ? ? onceClick(){
? ? ? ? ? ? ? console.log("=====onceClick=====")
? ? ? ? ? ? },
? ? ? ? ? ? submitClick(){
? ? ? ? ? ? ? ? console.log('=====submitClick====')
? ? ? ? ? ? },
? ? ? ? ? ? divClick(){
? ? ? ? ? ? ? ? console.log('=====divClick====')
? ? ? ? ? ? },
? ? ? ? ? ? btnClick(){
? ? ? ? ? ? ? ? console.log('=====btnClick====')
? ? ? ? ? ? },
? ? ? ? ? ? //獲取data里的數(shù)據(jù)
? ? ? ? ? ? showAlert() {
? ? ? ? ? ? ? ? alert(this.message)
? ? ? ? ? ? },
? ? ? ? ? ? say(msg) {
? ? ? ? ? ? ? ? alert(msg)
? ? ? ? ? ? },
? ? ? ? ? ? showLog(msg, event) {
? ? ? ? ? ? ? ? console.log(msg)
? ? ? ? ? ? ? ? console.log(event)
? ? ? ? ? ? ? ? //獲取點(diǎn)擊事件的對象
? ? ? ? ? ? ? ? console.log(event.target)
? ? ? ? ? ? ? ? console.log(event.target.name)
? ? ? ? ? ? },
? ? ? ? ? ? showEvent(event) {
? ? ? ? ? ? ? ? console.log(event)
? ? ? ? ? ? ? ? //獲取點(diǎn)擊事件的對象
? ? ? ? ? ? ? ? console.log(event.target)
? ? ? ? ? ? ? ? console.log(event.target.name)
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
常用的按鍵碼：
（1）.enter
（2）.tab
（3）.delete?(捕獲“刪除”和“退格”鍵)
（4）.esc
（5）.space
（6）.up
（7）.down
（8）.left
（9）.right
