Vue.js 事件处理器

事件监听可以使用 v-on 指令：

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width: 100px;
    height: 100px;
  }

  .active {
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>
</head>

<body>
  <div id="app">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
  </script>
  <script src="./test.js"></script>
</body>

</html>

结果

点击

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width: 100px;
    height: 100px;
  }

  .active {
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>
</head>

<body>
  <div id="app">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // `this` 在方法里指当前 Vue 实例
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    // 也可以用 JavaScript 直接调用方法
    app.greet() // -> 'Hello Vue.js!'
  </script>
  <script src="./test.js"></script>
</body>

</html>