vue事件(事件指令、事件对象、事件修饰符)

vue事件

1、事件指令：
两种写法：

• (1) v-on:事件名.修饰符="执行的函数名或表达式"

• (2) @事件名="执行的函数名或表达式"

  注意:

• (1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中

• (2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。
  在普通js函数中，加小括号是调用此函数

• (3) this指向:
  methods对象中的函数中，this指向的永远是当前vue实例对象，
  通过this可以访问methods中的函数

2、 事件对象：用来记录一些事件发生时的相关信息的对象

事件可能是：

• 用户在某些内容上的点击
• 鼠标经过某个元素
• 按下键盘上的某些按键
• 可能是web浏览器中发生的事情：
  某个web页面加载完成，或者是用户滚动窗口或改变窗口大小，等等。
• …
  vue中，事件绑定函数中的第一个参数默认是 event 对象
  当执行函数名后面带小括号或有其他参数时，执行后会是undefined，
  需要手动来传入$event，而模板中的$event的名字是固定死的(不能更改)

示例1如下，看看一下vue事件：

  <div id="id">
     <!--v-on:事件名="执行的函数或表达式"-->
     <button v-on:click="clickTest">点我啊</button>
   
     <!--@事件名="执行的函数或表达式"-->
     <button @click="clickTest2">点我呀</button>
     <button @click="clickTest2()">点我呀</button>
     
     <!--@事件名="执行的函数名($event)"-->
     <button @click="clickTest3">来呀来呀</button>
  </div>

   // 当然先引入vue.js,可直接引用vue的网络地址，最好是下载到本地使用。
   <script src="js/vue.js"></script>
   let app = new Vue({
    //实例化vue对象
       el:"#app",
       data:{
   
          val:"存放数据的",
          num:0
       },
       // 通过内联方式绑定事件处理函数
       // 函数都存放在methods中
       methods:{
   
            clickTest(){
   
                console.log("你点击了");
                console.log(this);//this指向当前vue实例对象，只要在Vue实例内的this都指向当前的vue实例对象
                console.log(this.val);//获取data中val值                
            },
            clickTest2(){
   
                console.log("你也点击了");
                console.log(this);//也指向当前vue实例对象
                console.log(this.$data.val);//同样获取data中val的值
                console.log(this.num++); //获取data中num的值，每点击一次按钮num自增1
           },