7_v-on.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. #div1{
  10. width: 200px;
  11. height: 200px;
  12. background: red;
  13. }
  14. #div2{
  15. width: 100px;
  16. height: 100px;
  17. background: orange;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="app">
  23. {{msg}}
  24. <!-- <button v-on:click="fn">btn</button> -->
  25. <button @click="fn">btn</button>
  26. <div id="div1" @click="fn1">
  27. 111
  28. <div id="div2" @click="fn2">
  29. 222
  30. </div>
  31. </div>
  32. <input type="text" @keyup="fn3">
  33. </div>
  34. <script src="./vue.js"></script>
  35. <script>
  36. var app = new Vue({
  37. el: "#app",
  38. data:{
  39. msg: 'hello'
  40. },
  41. methods:{
  42. fn(){
  43. console.log('1111')
  44. },
  45. fn1(){
  46. console.log('div1')
  47. },
  48. fn2(){
  49. console.log('div2')
  50. },
  51. fn3(){
  52. console.log(event.keyCode)
  53. }
  54. }
  55. })
  56. </script>
  57. </body>
  58. </html>