zoukankan      html  css  js  c++  java
  • vue的事件

    vue的事件:

       vue事件简写:

          vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件

          vue中就有事件简写   @click='show()'    这会不会就好点了呢!<!DOCTYPE html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <body>
         <div id="box">
       <button v-on:click='show()'>按钮1</button>
            <button @click='show()'>按钮2</button>     //这俩种方法都可以执行点击的事件,当然所有事件都可以这样简写。

         </div>     
    <script src='vue.js'></script>
         <script>
           new Vue({
              el:'#box',
              data:{},
              methods:{
                 show:function(){
                     alert(1) 
                 }
              }
              
           });
          
         </script> </body> </html>

      

       vue的事件对象:

          vue中当然也有事件对象了 , 这样@click='show($event)'  在时间函数中传$evevt  函数中接收一下,事件对象就有了。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <body>
         <div id="box">
               <button @click='show($event)'>按钮1</button>//传输事件对象
          </div>
        
            <script src='vue.js'></script>
         <script>
           new Vue({
              el:'#box',
              data:{},
              methods:{
                 show:function(ev){   //接收事件对象
                     alert(ev.clientX); //这个相信都知道
                  }
              }
              
           });
          
         </script>
        </body>
    </html>
    

      

       vue的事件冒泡:(大家在原生中都知道事件冒泡,当然不需要这样的时候需要阻止)。

          方法一: @click='show($event)'    我们有了事件对象后,我们函数中是不是就可以利用原生中的 ev.cancelBubble=true;

          方法二: @click.stop='show()'    只要在事件后面加 .stop  就可以阻止事件冒泡

       vue的阻止默认事件:(元素中都有一些大家不喜欢的事件或不需要的方法)

          方法一: @click='show($event)'    我们有了事件对象后,我们函数中是不是就可以利用原生中的 ev.preventDefault();

              方法二: @click.prevent='show()'   只要在事件后面加 .prevent  就可以阻止默认事件。

       vue的键盘事件:

          @keydown='show()'     当然我们传个$event  也可以在函数中获 ev.keyCode 

          我要说的是键盘事件中常用键.

          @keydown.enter='show()'    回车执行

          @keydown.up='show()'    上键执行

          @keydown.down='show()'    下键执行

          @keydown.left='show()'    左键执行

          @keydown.right='show()'    右键执行

          以及....................

  • 相关阅读:
    强化学习的基本迭代方法
    基于文本描述的事务聚类
    学习强化学习之前需要掌握的3种技能
    其它 华硕 ASAU S4100U 系统安装 win10安装 重装系统 Invalid Partition Table 解决
    数据分析 一些基本的知识
    Python 取样式的内容 合并多个文件的样式 自定义样式
    电商 Python 生成补单公司需要的评论格式3
    SpringBlade 本地图片上传 生成缩略图
    SQL Server 字符串截取
    SpringBlade 本地图片上传
  • 原文地址:https://www.cnblogs.com/durenlong/p/7077829.html
Copyright © 2011-2022 走看看