vue的事件一样通过指令v来描述，v-on:xxx的形式

点击就送

完整demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.      <button v-on:click="hit">点我</button>
  12. </div>
  14. <script src="../lib/vue.js"></script>
  15. <script>
  17.     var vm = new Vue({
  18.         el:'#app',
  19.         methods:{
  20.             hit:function () {
  21.                 alert('再烦我就打你哦')
  22.             }
  23.         }
  24.     })
  26. </script>
  27. </body>
  28. </html>

效果

image.png

这里用到了methods这个项，vue对数据的操作一般都封装在methods里面，可以通过合适的方式出发该方法，无疑就是事件。methods可以操作vue里面的数据。

demo2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <span>{{msg}}</span>
  11.      <button v-on:click="hit">点我</button>
  13. </div>
  15. <script src="../lib/vue.js"></script>
  16. <script>
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:{
  21.             msg:'谁没有一些刻骨铭心事'
  22.         },
  23.         methods:{
  24.             hit:function () {
  25.                 this.msg = this.msg.split('').reverse().join('');
  26.             }
  27.         }
  28.     })
  30. </script>
  31. </body>
  32. </html>

效果

点击之后文字逆转
image.png