Vue.js实例学习：事件处理

一、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。（ v-on: 简写为@）

<div id="app">
  <button @click = "count++">加 1</button>
  <button @click = "count--">减 1</button>
  <p>{
  {count}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    count:0
  }
});
</script>

输出：初始值为0

点击"加1"就增加1，同理点击"减1"就减少1

---

二、事件处理方法

许多事件处理逻辑会很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

1、调用无参数方法

顺便补一下js的event:

1. 将even（事件）作为参数，就是这个“点击”事件，通过这个even，可以获取到event.target，就是点击的对象等等属性。PS：那个even参数可加可不加，需要用到的时候就加。
2. event也就是事件的意思，就相当于把这个事件的对象传给这个方法，event包含了这个事件的所有参数和信息

<div id="app">
  <button @click = "greet">button</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    greet:function(event){//因为上面没有给该函数传递参数,所以给他个参数时,系统默认为event,可以随便起名字(阿毛,阿狗)