Vue系列七：事件处理

红太狼 2022-01-30 06:15 218阅读 0赞

1.  绑定监听:  
    v-on:xxx=“fun”  
    @xxx=“fun”  
    @xxx=“fun(参数)”  
    默认事件形参: event  
    隐含属性对象: $event
2.  事件修饰符:  
    .prevent : 阻止事件的默认行为 event.preventDefault()  
    .stop : 停止事件冒泡 event.stopPropagation()
3.  按键修饰符  
    .keycode : 操作的是某个keycode值的健  
    .enter : 操作的是enter键

<body>
    <div id="example">
    
      <h2>1. 绑定监听</h2>
      <button @click="test1">test1</button>
      <button @click="test2('abc')">test2</button>
      <button @click="test3('abcd', $event)">test3</button>
    
      <h2>2. 事件修饰符</h2>
      <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
      <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
      </div>
    
      <h2>3. 按键修饰符</h2>
      <input type="text" @keyup.13="test7">
      <input type="text" @keyup.enter="test7">
    
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#example',
        data: {
    
        },
        methods: {
          test1(event) {
            alert(event.target.innerHTML)
          },
          test2 (msg) {
            alert(msg)
          },
          test3 (msg, event) {
            alert(msg+'---'+event.target.textContent)
          },
    
          test4 () {
            alert('点击了链接')
          },
    
          test5 () {
            alert('out')
          },
          test6 () {
            alert('inner')
          },
    
          test7 (event) {
            console.log(event.keyCode)
            alert(event.target.value)
          }
        }
      })
    </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 事件处理

文章目录 * vue 事件处理 * * click 事件 * 事件修饰符 vue 事件处理 click 事件 v-on可以简写为...

快来打我*/ 2024年04月18日 23:59/ 0 赞/ 63 阅读

相关 Vue_事件处理和修饰符

vue的事件处理：可以使用v-on来进行事件处理，例如：v-on:click=“XXX” 也可以简写为：@click=“XXX”，@keyup=“XXX” vue的事件修饰

我不是女神ヾ/ 2022年12月10日 08:42/ 0 赞/ 165 阅读

相关 Vue.js（9）：事件处理

一、监听事件我们可以使用 `v-on` 指令 (通常缩写为 `@` 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为

灰太狼/ 2022年09月14日 13:22/ 0 赞/ 206 阅读

相关【Vue】—事件处理

【Vue】—事件处理 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

àì夳堔傛蜴生んèń/ 2022年09月03日 10:28/ 0 赞/ 157 阅读

相关 vue事件处理

1、监听事件： [详见Vue官网][Vue] 2、下拉框数据获取及改变： <div class="se"> <select v-model="

秒速五厘米/ 2022年05月27日 23:29/ 0 赞/ 186 阅读

相关 vue官网学习笔记（七）事件处理

监听事件可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。示例： <div id="example-1"> <

- 日理万妓/ 2022年04月24日 03:22/ 0 赞/ 228 阅读

相关事件处理——Vue.js

1. 事件监听v-on （1）简单的逻辑交互可以写在html标签中：比如： <div id="example-1"> <button v

偏执的太偏执、/ 2022年04月22日 13:56/ 0 赞/ 249 阅读

相关 Vue系列七：事件处理

1. 绑定监听: v-on:xxx=“fun” @xxx=“fun” @xxx=“fun(参数)” 默认事件形参: event

红太狼/ 2022年01月30日 06:15/ 0 赞/ 219 阅读

相关 Vue事件处理

Vue事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符监听事件可以使用`v-on`监听DOM事件

谁践踏了优雅/ 2021年10月20日 00:46/ 0 赞/ 328 阅读

相关 Vue事件处理

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

以你之姓@/ 2021年09月29日 11:50/ 0 赞/ 342 阅读