v-on

v-on的指令我们要了解4个方面:
1.用来干嘛？它的语法
2.为什么事件我们要加在methods中
3.怎么传递事件源
4.v-on的修饰符

语法：v-on:事件名称=“事件处理函数(参数)”   省略写法：@事件名称=“事件处理函数(参数)” 

• 演示如何为元素添加事件

• 如何添加事件处理函数

  • 定义事件处理函数的位置：methods属性
  • methods是一个单独的成员

• 为什么事件处理函数需要在methods中添加

  • 这个结构中的this是指向当前组件对象,

  • 理论上讲，你也可以在data中定义，但是这里面的this指向null，如果是网页文件指向window,这也是为什么我们在data中的数据可以直接在模板中取得,那么data中的数据也是存在与vue组件中的,它是怎么存在的呢??
    data中属性会直接的存在vue组件中,所以当你在methods中进行取数据时候直接this.数据属性名 即可

    
    
    01.png

• data中只定义数据，不定义功能行为

• 如何去传递事件参数

  • 如果你没有传递事件源对象，那么它也会默认的传递事件源对象
  • 如果传递自定义参数，那么默认的事件源对象就不现传递啦
  • 但是，如果传递自定义参数的同时，需要事件源对象，那么就需要手动传递$event

• 示例：

  <button v-on:click='dosome("jack",$event)'>点我啊</button>
  ---------------------------------------------------------
  methods: {
      dosome (name, event) {
        //   console.log('谢谢你点我')
        console.log(name)
        console.log(event)
      }
    }
  

• 简写：@

  <button @click='dosome("jack",$event)'>点我啊</button>
  

• 事件修饰符：

  
  
  02.png
  • prevent:阻止元素的默认行为
  • enter/13:键码和键别名
  • once:只触发一次
  • native:为组件的根元素添加原生事件

• 示例：

<template>
    <div class="on">
        <p>这个文件用来说明v-on绑定事件</p>
        <p>{{msg}}</p>
        <!-- v-on:事件名称=“事件处理函数(参数)” -->
        <button v-on:click='dosome("jack",$event)'>点我啊</button>
        <button v-on:[type]='dothis'>你自由</button>
        <button @click='dosome("jack",$event)'>点我啊</button>
        <a href="http://baidu.com" @click.prevent.stop='sayHi'>单击我向你问好</a>
        <!-- <input type="text" v-model="key" @keydown.enter="showmsg"> -->
        <input type="text" v-model="key" @keydown.13="showmsg">
        <button @click.once='onceDo'>点我啊，只有一次机会</button>
        <button @click.once='key=123'>点我啊，只有一次机会</button>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      type: 'dblclick',
      key: 'abc'
    }
  },
  methods: {
    onceDo () {
      console.log('onceDo')
    },
    showmsg () {
      console.log(this.key)
    },
    sayHi (event) {
    //   event.preventDefault()
      alert('你好啊~~~')
    },
    dosome (name, event) {
      //   console.log('谢谢你点我')
      console.log(name)
      console.log(event)
    },
    dothis () {
      console.log('dothis')
    }
  }
}
</script>
<style lang="less" scoped>

</style>