07事件函数

<template>
    <div>
      <h1>事件处理</h1>
    </div>
    <div id="root">
      <h2>可以分享你手机里的{{ sky}}吗？</h2>
    </div>
    <button v-on:click="showInfo1">点我提示信息(不传参)</button>&nbsp;
    <button @click="showInfo2($event,66)">点我提示信息(传参)</button>
    <hr/>
    事件的基本使用：<hr/>
        1.使用v-on:xxx 或 @xxx 绑定事件， 其中xxx是事件名;<hr/>
        2.事件的回调需要配置在methods中,最终会在vm上;<hr/>
        3.methods中配置的函数,不要用箭头函数! 否者this就不是vm了<hr/>
        4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象；<hr/>
        5.@click="demo" 和 @click="demo($event)" 效果一样, 但是后者可以传参数<hr/>
  </template>
  <script>
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        
        sky: '天空',
        // address: '辽宁省大连市高新园区'
      
      }
    },
    methods:{
      showInfo1 (event) {
        // console.log(event.target.innerText)
        console.log(event)
        // console.log(this) // 此处的this是vm
       
        alert('想啥呢，当然不可以')
      },
      showInfo2 (a,event) {
        // console.log(event.target.innerText)
        console.log(a,event)
        // console.log(this) // 此处的this是vm
       
        alert('可不可以')
      }
  
    }
    
  }
  </script>
  <style scoped>
  #root {
    font-size: 25px;
    color: rgb(166, 111, 111);
  }
  </style>






    <template>
    <div>
      <h1>事件处理</h1>
    </div>
    <div>
      <h2 id="root">你消失在无名的大街，从此就没有在见面</h2>
  
      <h2>prevent阻止默认事件</h2>
      <a href="http://www.baidu.com" @click="showInfo($event)">点我进入百度</a><br/>
      <a href="http://www.baidu.com" @click.prevent="showInfo1">点我进入百度</a><hr/>
  
      <h2>stop阻止事件冒泡(默认事件冒泡处理事件)由内往外</h2>
      <div class="demo1" @click="showInfo2">
        <button v-on:click.stop="showInfo2($event)">太容易因为别人的优秀而焦虑</button>
        // 阻止事件冒泡 修饰符可以连着写
        <a href="http://www.baidu.com" v-on:click.stop.prevent="showInfo2($event)">太容易因为别人的优秀而焦虑</a>
      </div><p></p>
      <hr/>
      <h2>once事件只触发一次</h2>
      <button v-on:click.once="showInfo2($event)">太容易因为别人的优秀而焦虑</button><p></p>
      <hr/>
      <h2>capture使用事件的捕获模式(先经过的是事件捕获，然后再是事件冒泡[处理事件])由外往内在由内往外</h2>
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)" >
          div2
        </div>
      </div>
      <p></p>
      <hr />
      <h2>self:只有event.target是当前操作的元素时才触发事件</h2>
      <div class="demo1" @click.self="showInfo3">
        <button v-on:click="showInfo3($event)">太容易因为别人的优秀而焦虑</button>
      </div>
    </div>
    <p></p>
    <hr />
    <h2>passive:事件的默认行为立即执行,无需等待事件回调执行完毕</h2>
    <ul @scroll="demo" class="list">
      <li>1@scroll滚动条触发</li>
      <li>2@wheel滚轮触发</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <p></p>
    <hr />
    <p>Vue中的事件修饰符</p>
    <h5>1.prevent:阻止默认事件(常用)</h5>
    <h5>2.stop:阻止事件冒泡(常用)</h5>
    <h5>3.once:事件只触发一次(常用)</h5>
    <h5>4.capture:使用事件的捕获模式</h5>
    <h5>5.self:只有event.target是当前操作的元素时才触发事件</h5>
    <h5>6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕</h5>
  
    
    <hr/>
  
  </template>
  <script>
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        
        sky: '天空',
        // address: '辽宁省大连市高新园区'
      
      }
    },
    methods:{
      showInfo (e) {
        // 阻止跳转
        e.preventDefault()
        alert('学习不是目的，工作不是目的， 挣钱也不是目的， 只不过这一切都是为了经济可以独立,灵魂挺拔，谁又不是被迫谋生')
      },
      showInfo1 () {
        alert('学习不是目的，工作不是目的， 挣钱也不是目的， 只不过这一切都是为了经济可以独立,灵魂挺拔，谁又不是被迫谋生')
      },
      showInfo2 (e) {
        e.stopPropagation()
        alert('你若抽不出来时间来创造自己想要的生活，最终你要花费更多的时间去面对不想过的生活。')
      },
      showInfo3 (e) {
        console.log(e.target)
  
        alert('你若抽不出来时间来创造自己想要的生活，最终你要花费更多的时间去面对不想过的生活。')
      },
      showMsg (msg) {
        console.log(msg);
  
      },
      demo(){
        for(let i=0; i<10000; i++) {
          console.log('#')
        }
        console.log('累坏了')
      }
    }
    
  }
  </script>
  <style scoped>
  #root {
    font-size: 25px;
    color: rgb(166, 111, 222);
  }
  .demo1{
    height: 50px;
    background-color: skyblue;
  }
  *{
    margin-top: 1px;
  }
  .box1{
    padding: 5px;
    background-color: #ccc;
  }
  .box2{
  padding: 5px;
  background-color: blue;
  }
  .list{
    height: 200px;
    width: 200px;
    background-color: peru;
    overflow: auto;
  }
  li{
    height: 100px;
  }
  </style>




<template>
    <div>
      <h1>事件处理・键盘事件</h1>
    </div>
    <input type="text"
    placeholder="按下回车提示输入"
    v-on:keyup.enter="showInfo($event)"
    >
    <hr/>
    1.Vue中常用的按键别名<hr/>
            回车  => enter<hr/>
            删除  => delete （捕获退格,和尚楚建）<hr/>
            退格  => esc<hr/>
            空格  => space<hr/>
            换行  => tab (特殊， 必须配合keydown去使用)<hr/>
            上    => up<hr/>
            下    => down<hr/>
            左    => left<hr/>
            右    => right<hr/>
    2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)<hr/>
    3.系统修饰键(用法特殊): ctrl、alt、shift、meta<hr/>
        (1).配合keyup使用: 按下修饰键同时,在按下其他键,随后释放其他键,事件才被触发<hr/>
        (2).配合keydown使用: 正常触发事件<hr/>
    4.也可以说使用keyCode去指定具体的按键(不推荐)vue3取消这个方法<hr/>
    5.Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名<hr/>
  
  </template>
  <script>
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        
        sky: '天空',
        // address: '辽宁省大连市高新园区'
      
      }
    },
    methods:{
      showInfo (event) {
        // 13 是回车
        if (event.keyCode !== 13) {
          return
        }
        console.log(event.key)
        console.log(event.keyCode)
        console.log(event.target.value)
  
      }
      
    }
    
  }
  </script>
  <style scoped>
  </style>