4.5vue指令之v-on：

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>

4.5vue指令之v-on：

v-on

推荐阅读更多精彩内容