vue基础语法之事件绑定

事件绑定

处理事件

---

v-on指令用法

  <input type='button' v-on:click='num++'>

v-on简写形式

  <input type='button' @click='num++'>

---

事件函数的调用方式

直接绑定函数名称

  <input type='button' v-on:click='say'>

调用函数

  <input type='button' v-on:click='say()'>
<div id="app">
    <div>{{num}}</div>
    <div>
      <button v-on:click='num++'>加一</button>
      <button @click='num--'>减一</button>
      <button v-on:click='handle'>加一1</button>
      <button @click='handle()'>加一2</button>
    </div>
</div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 2
      },
      methods: {
        handle: function () {
          //这里的this指向的是vm  vue的实例对象
          this.num++;
        }
      }
    })
</script>

事件函数参数传递

普通参数和事件对象

<input type='button' v-on:click='say('hi',$event)'> 
<!-- 事件对象$event  固定写法 -->

1. 如果事件直接绑定函数名称，name默认会传递事件对象作为事件函数的第一个参数
2. 如果事件绑定函数调用，name事件对此昂必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

事件对象中的target属性就是调用这个方法的元素本身