事件繫結

含義 : 事件繫結 , xxx是事件名

簡寫 : [ @:xxx=' ' ]

注意 :  　　1.事件的回撥需要配置在methods物件中，最終會在vm上； 　　2.methods中配置的函式，不要用箭頭函式！否則this就不是vm了； 　　3.methods中配置的函式，都是被Vue所管理的函式，this的指向是vm 或 元件例項物件vc； 　　4.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參； 例子:

<button @click="showInfo1">點我提示資訊1（不傳參）</button>
<button @click="showInfo2($event
 
,66)">點我提示資訊2（傳參,$event固定值,別的沒用）</button>


// 函式的第一個引數,預設是event的
showInfo1(event){
    console.log(event)
    // console.log(this) //此處的this是vm
    alert('同學你好！')
},


//可以傳遞引數,那麼第一個就要用$event替代[$event固定值]
showInfo2(event,number){
    console.log(event,number)
    // console.log(event.target.innerText)
    // console.log(this) //此處的this是vm
    alert('同學你好！！')
}
 

事件修飾符 : 

　　1.prevent：阻止預設事件（常用）； 　　2.stop：阻止事件冒泡（常用）； 　　3.once：事件只觸發一次（常用）； 　　4.capture：使用事件的捕獲模式； 　　5.self：只有event.target是當前操作的元素時才觸發事件； 　　6.passive：事件的預設行為立即執行，無需等待事件回撥執行完畢； 　　例子 : 

<!-- 阻止預設事件（常用）只會彈出資訊,不會跳轉到新地址 -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示資訊</a>

<!-- 阻止事件冒泡（常用）只彈出一次,不會在demo1彈出 
 
-->
<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">點我提示資訊</button>
    <!-- 修飾符可以連續寫 只彈出一次,並且不會跳轉新地址 -->
    <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示資訊</a>
</div>

<!-- 事件只觸發一次（常用） -->
<button @click.once="showInfo">點我提示資訊</button>

<!-- 使用事件的捕獲模式 在div2的從外到內,先彈1,再彈2 在div1的,只彈1-->
<div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>

<!-- 只有event.target是當前操作的元素時才觸發事件； -->
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">點我提示資訊</button>
</div>

<!-- 事件的預設行為立即執行，無需等待事件回撥執行完畢； -->
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

鍵盤修飾符 : 

1.Vue中常用的按鍵別名： 　　回車 => enter 　　刪除 => delete (捕獲“刪除”和“退格”鍵) 　　退出 => esc 　　空格 => space 　　換行 => tab (特殊，必須配合keydown去使用) 　　上 => up 　　下 => down 　　左 => left 　　右 => right
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta 　　(1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 　　(2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦）
5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名