绑定监听 事件修饰符 按键修饰符

<template>

  <div>

      <!-- <h3>绑定监听</h3>

      <button @click="one">one</button>

      <button @click="two('Eric')">two</button>

      <button @click="three('Eric-one',$event)">three</button> -->

 

     <!-- 阻止默认行为 prevent -->

     <!-- stop 阻止冒泡 -->

      <!-- <h3>事件修饰符</h3> 

      <a href="http://www.baidu.com"  @click.prevent="four">百度</a>  

      <div style="width:100px;height:100px;background:red;" @click="five">

          <button @click.stop="six">子按钮</button>

      </div> 

       <a href="#"  @click.prevent.once="four">触发一次</a> -->

        <h3>按键修饰符</h3>

        <input type="text" @keyup.enter="seven">

 

  </div>

</template>

<script>

export default {

  name: 'Event',

  data() {

   return { 

   }

  },

  methods:{

      one(event){

       console.log(event.target.innerHTML);

      },

      two(str){

       console.log(str); // eric

      },

      three(str,event){

       console.log(str,event,event.target.innerHTML);

      },

      four(){

          alert('不会跳转');

      },

      five(){

       alert('点击了红色面板'); 

      },

      six(){

          alert('点击了此按钮');

      },

      seven(event){

          console.log(event['keyCode']);

      }

  }

}

</script>

 <style scoped>

 

</style>