vue學習---事件的基本使用(v-on / @xxx)
阿新 • • 發佈：2021-11-13
事件的基本使用：
1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx是事件名；
2.事件的回撥需要配置在methods物件中，最終會在vm上；
3.methods中配置的函式，不要用箭頭函式！否則this就不是vm了；
4.methods中配置的函式，都是被Vue所管理的函式，this的指向是vm 或 元件例項物件；
5.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 事件的基本使用： 1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx是事件名； 2.事件的回撥需要配置在methods物件中，最終會在vm上； 3.methods中配置的函式，不要用箭頭函式！否則this就不是vm了； 4.methods中配置的函式，都是被Vue所管理的函式，this的指向是vm 或 元件例項物件； 5.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參；--> <!-- 準備好一個容器--> <div id="root"> <h2>歡迎來到{{name}}學習</h2> <!-- <button v-on:click="showInfo">點我提示資訊</button> --> <button @click="showInfo1">點我提示資訊1（不傳參）</button> <button @click="showInfo2($event,66)">點我提示資訊2（傳參）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。 const vm = new Vue({ el:'#root', data:{ name:'尚矽谷', }, methods:{ showInfo1(event){// console.log(event.target.innerText) // console.log(this) //此處的this是vm alert('同學你好！') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此處的this是vm alert('同學你好！！') } } }) </script> </html>