VUE学习指南——事件处理

v-on和@

两种使用方法

 //使用方法一：使用v-on
 <button v-on:click="showInfo">点我查看提示</button>
 //使用方法二：只是把v-on：改成@
 <button @click="showInfo2">点我查看提示2</button>

事件函数的使用

使用methods，将其放在new Vue之外

 <script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
      el:'#root',
      data:{
        name:'彭于晏'
      },
      methods:{
        showInfo(event)
        {
          alert('满分喷雾！')
        },
        showInfo2()
        {
		 alert('满分喷雾！')
        }
      }
    })
  </script>

解析

为什么要用methods?为什么要把函数写在实例外面？

其实写在实例里面也不是不可，也会出现同样的效果，就像数据绑定里所说，在实例里，会为showInfo创造一个getter、一个setter函数，使vue项目运行起来更加麻烦。代码少了还行，多了就会造成

event：事件参数。

使用方法如下

<button @click="showInfo2($event,666)">点我查看提示2</button>
//直接在函数后面加上括号里面写参数即可
//$event是占位符用于以后查看event的内容。因为若不加event占位符只有参数的话
//在后面就无法使用console.log(event.target)之类的去查看event内容

   <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'彭于晏'
      },
      methods:{
        showInfo2(event,number)
        {
        //参数只能用number接收
          console.log(number)
        }
      }})
  </script>

总结

事件的基本使用（来自尚硅谷）

1. 使用v-on 或者@来绑定事件
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数不要使用箭头函数！否则this就不是vm了
4. methods中配置的函数都是被vue管理的函数，this指向的是vm或组件实例对象
5. event占位符

（关于什么是this，先挖个坑放在这儿）