Vue基础篇 v-on事件的相关使用

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

<div id="app">

<button v-on:click="counter += 1">增加 1</button>

<p>这个按钮被点击了 {{ counter }} 次。</p>

</div>

<script>

new Vue({

       el: '#app',

       data: {

           counter: 0

       }

})

</script>

尝试一下

2.也可以使用VM对象里面methods

<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>

尝试一下

3.除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="app">

<button v-on:click="say('hi')">Say hi</button>

<button v-on:click="say('what')">Say what</button>

</div>

<script> new Vue({

      el: '#app',

      methods: {

            say: function (message) {

                  alert(message)

            }

      }

  })

</script>

尝试一下