v-on

v-on的指令我們要了解4個(gè)方面:
1.用來干嘛？它的語法
2.為什么事件我們要加在methods中
3.怎么傳遞事件源
4.v-on的修飾符

語法：v-on:事件名稱=“事件處理函數(shù)(參數(shù))”   省略寫法：@事件名稱=“事件處理函數(shù)(參數(shù))” 

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

• 如何添加事件處理函數(shù)

  • 定義事件處理函數(shù)的位置：methods屬性
  • methods是一個(gè)單獨(dú)的成員

• 為什么事件處理函數(shù)需要在methods中添加

  • 這個(gè)結(jié)構(gòu)中的this是指向當(dāng)前組件對象,

  • 理論上講，你也可以在data中定義，但是這里面的this指向null，如果是網(wǎng)頁文件指向window,這也是為什么我們在data中的數(shù)據(jù)可以直接在模板中取得,那么data中的數(shù)據(jù)也是存在與vue組件中的,它是怎么存在的呢??
    data中屬性會直接的存在vue組件中,所以當(dāng)你在methods中進(jìn)行取數(shù)據(jù)時(shí)候直接this.數(shù)據(jù)屬性名 即可

    
    
    01.png

• data中只定義數(shù)據(jù)，不定義功能行為

• 如何去傳遞事件參數(shù)

  • 如果你沒有傳遞事件源對象，那么它也會默認(rèn)的傳遞事件源對象
  • 如果傳遞自定義參數(shù)，那么默認(rèn)的事件源對象就不現(xiàn)傳遞啦
  • 但是，如果傳遞自定義參數(shù)的同時(shí)，需要事件源對象，那么就需要手動傳遞$event

• 示例：

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

• 簡寫：@

  <button @click='dosome("jack",$event)'>點(diǎn)我啊</button>
  

• 事件修飾符：

  
  
  02.png
  • prevent:阻止元素的默認(rèn)行為
  • enter/13:鍵碼和鍵別名
  • once:只觸發(fā)一次
  • native:為組件的根元素添加原生事件

• 示例：

<template>
    <div class="on">
        <p>這個(gè)文件用來說明v-on綁定事件</p>
        <p>{{msg}}</p>
        <!-- v-on:事件名稱=“事件處理函數(shù)(參數(shù))” -->
        <button v-on:click='dosome("jack",$event)'>點(diǎn)我啊</button>
        <button v-on:[type]='dothis'>你自由</button>
        <button @click='dosome("jack",$event)'>點(diǎn)我啊</button>
        <a  @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'>點(diǎn)我啊，只有一次機(jī)會</button>
        <button @click.once='key=123'>點(diǎn)我啊，只有一次機(jī)會</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('謝謝你點(diǎn)我')
      console.log(name)
      console.log(event)
    },
    dothis () {
      console.log('dothis')
    }
  }
}
</script>
<style lang="less" scoped>

</style>