Vue.事件

事件

1. 指令v-on

2. 格式
   v-on:eventType = “事件处理程序名称”

3. 简写
   @eventType = ‘事件处理程序名称’

4. 参数
   如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数

 <div id="app">
    <h3> 普通事件 </h3>
    <button v-on:click = 'normalHandler'> 普通事件 </button>
    <button @click = 'normalHandler'> 普通事件-简写 </button>
    <hr>
    <h3> 事件对象 </h3>
    <button @click = "eventHandler"> 事件对象 </button>
    <hr>
    <h3> 事件传参 </h3>
    <button @click = "arguHandler( 10,20 )"> 事件传参 </button>
    <button @click = "arguHandler( a,b )"> 事件传参 </button>
    <button @click = "argu_event_handler( a,b,$event )"> 事件传参 - 事件对象 </button>
  </div>
  
 语法：
 /* 
    1. 如果我的参数中需要事件对象

      解决： 在方法调用的时候，使用一个叫做 $event的作为实际参数
      Handler事件处理程序
   */
  new Vue({
    el: '#app',
    data: {//放两个参数
      a: 10,
      b: 20
    },
    methods: {//定义事件处理程序
      normalHandler () {//<=普通事件
        alert('普通事件')
      },
      eventHandler ( e ) {//事件对象
        console.log( e )
      },
      arguHandler ( a, b ) {//事件传参
        alert( a + b )
      },
      argu_event_handler ( a,b,e) {
        console.log( e )
        console.log( a + b )
      }
    }
  })

5. 事件修饰符

   • 修饰符
     事件的修饰符
     格式： v-on:click.xxx = ‘handler’
     xxx指的是修饰符的名称

     问题： 修饰符使用有什么好处？

     举例： 事件冒泡案例

     分析： 发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余

     解决： 事件修饰符

     总结：用事件修饰符可以解决代码冗余，

<div id="app">
      <div class="big" @click.stop = "bigHandler">
        <div class="middle" @click.stop = "middleHandler">
          <div class="small" @click.stop = "smallHandler"></div>
        </div>
      </div>
      <hr>
      <div class="big" @click.self = "bigHandler">
        <div class="middle" @click.self = "middleHandler">
          <div class="small" @click.self = "smallHandler"></div>
        </div>
      </div>
  </div>
  
  语法：
   new Vue({
    el: '#app',
    methods: {
      bigHandler (e) {
        // e.stopPropagation()
        alert('big')
      },
      middleHandler (e) {
        // e.stopPropagation()
        alert('middle')
      },
      smallHandler (e) {
        // e.stopPropagation()
        alert( 'small' )
      }
    }
  })

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

6. 按键修饰符
   案例： 敲击键盘的enter键，将用户输入的数据拿到手？

   事件的书写
   先写方法，然后在绑定DOM元素身上

例：
box.onclick = function(){}//box事件源 on添加事件的形式 click事件类型 function函数是事件处理程序

原因：我们发现当我们需要书写很多下面类似代码的时候，发现代码在重复，我们希望代码能复用或是简写
解决： 它将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用自定义按键修饰符键盘码、
Vue.config.keyCodes.p = 80

<div id="app">
   <input type="text" @keyup = "get_user_input">//把方法绑定在input上
   <h3> 按键修饰符 </h3>
   <input type="text" @keyup.enter = "get_user_shuru">
   <input type="text" @keyup.13 = "get_user_shuru">
   <input type="text" @keyup.s = "get_user_shuru">
 </div> 

 ````javascript
 new Vue({
  el: '#app',
  methods: {
  get_user_input ( e //事件源) {//得到用户的inpu标签
    const keyCode = e.keyCode
    const target = e.target 
    if( keyCode === 13 ){
        console.log( target.value )
    }
  },
  get_user_shuru ( e  ) { // 用户输入获取value的方法
    console.log( e.target.value )
  }
}

})