Vue07-事件处理

最新推荐文章于 2024-04-01 20:42:35 发布

MarxistVive

最新推荐文章于 2024-04-01 20:42:35 发布

阅读量54

点赞数

分类专栏： Vue2笔记文章标签： javascript vue.js 前端事件

本文链接：https://blog.csdn.net/A1066223647/article/details/125022750

版权

Vue2笔记专栏收录该内容

41 篇文章 1 订阅

订阅专栏

Vue07-事件处理

文章目录

Vue07-事件处理

一、事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <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($event,66)">点我提示信息2（传参）</button>
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

      const vm = new Vue({
         el:'#root',
         data:{
            name:'尚硅谷',
         },
         methods:{
            showInfo1(event){
               // console.log(event.target.innerText)
               // console.log(this) //此处的this是vm
               alert('同学你好！')
            },
            showInfo2(event,number){
               console.log(event,number)
               // console.log(event.target.innerText)
               // console.log(this) //此处的this是vm
               alert('同学你好！！')
            }
         }
      })
   </script>
</html>

二、事件修饰符

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <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{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
         }
         li{
            height: 100px;
         }
      </style>
   </head>
   <body>
      <!-- 准备好一个容器-->
      <div id="root">
         <h2>欢迎来到{{name}}学习</h2>
         <!-- 阻止默认事件（常用） -->
         <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

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

         <!-- 事件只触发一次（常用） -->
         <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>

         <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<!--         正常时是先执行回调函数，回调函数执行完毕以后再进行默认行为，但不是所有事件都是这样的顺序-->
<!--         wheel是鼠标滚轮事件，scroll是页面滚动条事件-->
         <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
         </ul>

      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

      new Vue({
         el:'#root',
         data:{
            name:'尚硅谷'
         },
         methods:{
            showInfo(e){
               alert('同学你好！')
               // console.log(e.target)
            },
            showMsg(msg){
               console.log(msg)
            },
            demo(){
               for (let i = 0; i < 100000; i++) {
                  console.log('#')
               }
               console.log('累坏了')
            }
         }
      })
   </script>
</html>

三、键盘事件

Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2). 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>键盘事件</title>
      <!-- 引入Vue -->
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
      <!-- 准备好一个容器-->
      <div id="root">
         <h2>欢迎来到{{name}}学习</h2>
         <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
      Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

      new Vue({
         el:'#root',
         data:{
            name:'尚硅谷'
         },
         methods: {
            showInfo(e){
               // console.log(e.key,e.keyCode)
               console.log(e.target.value)
            }
         },
      })
   </script>
</html>
:{
            name:'尚硅谷'
         },
         methods: {
            showInfo(e){
               // console.log(e.key,e.keyCode)
               console.log(e.target.value)
            }
         },
      })
   </script>
</html>