05-事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

小影

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量96

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/112555828

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-v-on的基本使用

普通写法与语法糖写法

<body>
    <div id="app">
      <h2>{{counter}}</h2>
      <!-- 普通写法 -->
      <button v-on:click="increment">+</button>
      <button v-on:click="decrement">-</button>

      <!-- 语法糖写法 -->
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 1,
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
      });
    </script>
  </body>

02-v-on的参数使用

使用函数时如果有需要参数的情况

<body>
    <div id="app">
      <!-- 事件调用的方法没有参数 -->
      <button @click="btn1Click()">按钮1</button>
      <button @click="btn1Click">按钮1</button>

      <!-- 在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，
Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
      <button @click="btn2Click">按钮2</button>

      <!--3.方法定义时，我们需要event对象， 同时又需要其他参数-->
      <!--在调用方式，如何手动的获取到浏览器参数的event对象: $event-->
      <button @click="btn3Click(123,$event)">按钮3</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 1,
        },
        methods: {
          btn1Click() {
            console.log("btn1Click");
          },
          btn2Click(event) {
            console.log("-------", event);
          },
          btn3Click(abc, event) {
            console.log("+++++++", abc, event);
          },
        },
      });
    </script>
  </body>

03-v-on的修饰符

列举了常见的stop，prevent，keyup，once

<body>
    <div id="app">
      <!-- .stop阻止事件冒泡，点击btn的时候div不被点击 -->
      <div @click="divClick">
        <button @click="btnClick">没加stop的btn</button>
        <button @click.stop="btnClick">加了stop的btn</button>
      </div>

      <!-- .prevent阻止默认事件，例如submit的提交时间，可以用于判断信息完整性 -->
      <form action="https://www.baidu.com">
        <button type="submit" @click="btnSubmit">没加prevent的提交</button>
        <button type="submit" @click.prevent="btnSubmit">
          加了prevent的提交
        </button>
      </form>

      <!-- 监听所有键盘点击事件，通过修饰符来监听特殊的按键 -->
      <input type="text" value="" @keyup="keyUp" />
      <!-- 监听键盘点击事件中的enter,z输入事件 -->
      <input type="text" value="" @keyup.enter="keyUp" />
      <input type="text" value="" @keyup.90="keyUp" />

      <!-- 只触发一次回调函数，用于表单提交时 -->
      <button @click.once='btnOnce'>一次提交</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 1,
        },
        methods: {
          divClick() {
            console.log("divClick");
          },
          btnClick() {
            console.log("btnClick");
          },
          btnSubmit() {
            console.log("btnSubmit");
          },
          keyUp() {
            console.log("keyUp");
          },
          btnOnce(){
              console.log("once")
          }
        },
      });
    </script>
  </body>

提到了键盘监听事件，补充下键盘点击对应值，以下内容转载来源于
https://www.cnblogs.com/simple827/p/12001752.html
键盘事件对应的码值
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
键值对应表

A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD

小影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
05-事件监听

01-v-on的基本使用普通写法与语法糖写法<body> <div id="app"> <h2>{{counter}}</h2>  <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> &l
复制链接

扫一扫

专栏目录