Vue事件处理

最新推荐文章于 2024-09-07 21:28:34 发布

敲代码的小李同学

最新推荐文章于 2024-09-07 21:28:34 发布

阅读量123

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_65357520/article/details/139174771

版权

1.事件的基本处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件的基本处理</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
 <div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo1">点我提示信息1</button>
<button @click="showInfo2(66)">点我提示信息2</button>
 </div> 
</body>
<!-- 事件的基本使用
         1.使用v-on:xxx或 @xxx 绑定事件，其中xxx是事件名：
         2.事件的回调需要配置在methods对象中，最终会在vm身上
         3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
         4.methods中配置的函数，都是被Vue所管理的函数，this指向vm或组件实例对象
         5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参
-->
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      name:'尚硅谷'
    },
    methods:{
      showInfo1(){
        //console.log(event.target.innerText)
        //console.log(this)//此处的this是vm
        alert('同学你好!')
      },
      showInfo2(number){
        //console.log(event.target.innerText)
        //console.log(this)//此处的this是vm
        alert('同学你好!!')
        console.log(number)
      }
    }
  })
</script>
</html>

2.事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件修饰符</title>
   <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
    *{
      margin-top: 20px;
    }
    .demo1{
      height: 50px;
      background-color: skyblue;
    }

    .box1{
      padding: 5px;
      background-color: skyblue;
    }

    .box2{
      padding: 5px;
      background-color: orange;
    }

    .list{
      height: 200px;
      width: 200px;
      background-color: peru;
      overflow: auto;
    }
    li{
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- 
    Vue中的事件修饰符：
         1.prevent：阻止默认事件(常用);
         2.stop:阻止事件冒泡(常用);
         3.once：事件只触发一次(常用);
         4.capture：使用事件的捕获方式;
         5.self:只有event.target是当前操作的元素时才触发事件;
         6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕;
   -->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件(常用) -->
    <a href="http://www.baidu.com" @click.prevent="showInfo">点我跳转到百度</a>

    <!-- 阻止事件冒泡(常用) -->
    <div class="demo1" @click="showInfo">
      <button  @click.stop="showInfo">点我提示信息</button>
    </div>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo"></a> -->

    <!-- 事件只触发一次(常用) -->
    <button  @click.once="showInfo">点我提示信息</button>

    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
      div1
      <div class="box2" @click="showMsg(2)">
        div2
      </div>
    </div>
    <!-- 只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo1" @click.self="showInfo">
      <button  @click="showInfo">点我提示信息</button>
    </div>
    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
  <ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  </div>
</body>
<script>
  new Vue({
    el:'#root',
    data:{
      name:'尚硅谷'
    },
    methods: {
      showInfo(){
        // alert('同学你好')
        console.log(e.target)
      },
    showMsg(msg){
        console.log(msg)
      },
    demo(){
        console.log('@')
      }
    },
  })
</script>
</html>

3.键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    1.Vue中常用的案件别名：
         回车=>enter
         删除=>delete(捕获"删除"和"退格"键)
         退出=>esc
         空格=>space
         换行=>tab(特殊，必须配合keydown使用)
         上=>up
         下=>down
         左=>left
         右=>right

    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

    3.系统修饰符(用法特殊):ctrl,alt,shift,meta
        (1).配合keyup使用：按下修饰键的同时，再按下其他键。随后释放其他键，事件才会被触发
        (2).配合keydown使用：正常触发事件。

    4.也可以使用keyCode去指定具体的按键(不推荐)

    5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
   -->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
  </div>
</body>
<script>
  new Vue({
    el:'#root',
    data:{
      name:'尚硅谷'
    },
    methods: {
      showInfo(e){
        console.log(e.key,e.keyCode)
        // if(e.keyCode !=13) return
        // console.log(e.target.value)
      }
    },
  })
</script>
</html>