avatar
fireworks99
keep hungry keep foolish

@click vs onclick

  • onclick可以由JS引擎直接识别,在全局寻找对应处理方法。
  • @click是vue语法糖,由vue在自己的methods里寻找对应处理方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <button @click="vueClick()">vueClick</button> <button onclick="domClick()">domClick</button> </div> <script> const app = new Vue({ el: "#app", data() { return { visible: false } }, methods: { vueClick() { console.log("vueClick"); }, domClick() { console.log("domClick"); } } }) function vueClick() { alert("vueClick"); } function domClick() { alert("domClick"); } </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

结果:打印vueClick、警告domClick

Site by Baole Zhao | Powered by Hexo | theme PreciousJoy