Vuejs事件三

最新推荐文章于 2022-09-19 14:17:08 发布

米白蓝

最新推荐文章于 2022-09-19 14:17:08 发布

阅读量437

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124142673

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div class="box">
    <h1>欢饮来到{{adress}}</h1>
    <div class="box2" @click="showInfo">
      <div class="box1" @click="showInfo">
        <button v-on:click.stop="showInfo">点击我</button>
      </div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="prevent">点击阻止默认事件</a>
    <br>
    <div class="box3" @click.capture="showMsg(1)">box3
      <div class="box4" @click="showMsg(2)">box4</div>
    </div>
    <input type="text" placeholder="input事件" @keyup.x.y="showData">
  </div>
  <script>
    new Vue({
      el: '.box',
      data: {
        adress: '美好的地方',
      },
      methods: {
        showInfo(e) {
          console.log('我被点击了', e);
          console.log(e.target);
          console.log(this);
        },
        prevent(e) {
          e.pre
          console.log('阻止默认事件');
        },
        showMsg(msg) {
          console.log('事件捕获');
          console.log(msg);
        },
        showData(e) {
          console.log(e.target.value);
          console.log(e.keyCode, e.key);
        }
      }
    })
  </script>
</body>

v-on:click=“回调函数”:点击响应事件；
Vue({el:‘’,data:‘’,methods: {})(配置对象中的属性，用于将存放函数，以便以模板中使用)})
事件响应后函数会默认传一个参数event；想要传自己的参数的时候，可以在传的参数中先写$event给e占一个位，解析的时候就可以识别出来，后面就可以跟上自己想要传的参数；
Vue实例的方法是被vue实例管理的，它没有做数据代理；data中的内容才会做数据代理和数据劫持；
事件修饰符：写在标签中以点的形式写事件后面；prevent：阻止默认事件；stop：阻止事件冒泡；once：事件只触发一次；capture：使事件在捕获剪短开始处理；self：只有e.target是当前点击的元素的时候才会触发该事件；passive：事件的默认行为会立即执行，不会先等待回调事件执行完毕；可以以点的形式连这写这些修饰符；
@scroll：选中区域滚动后就会触发；@wheel：滚轮滚动就会触发，就算该区域没有发生滚动；
键盘事件：keydown：按下触发；keyup：按下之后抬起来触发；e.keycode：按键编码；在事件上写.后面跟事件修饰符；给常用键盘起别名：enter：回车；delete：删除（删除或退格键）；esc：退出；tab：换行；space：空格；up：上；down：下；左：left；右：right；
e.key：是按键的名字；可以把按键的名字以事件修饰符的形式写在事件后面；如果有驼峰的形式命名的，则可以通过全部小写，并且在中间写-的形式来写；
tab：键，可以让光标从事件中切走，必须配合keyDown使用，因为按下光标就切走了；
系统修饰键（用法特殊）：ctrl，alt，shift，meta（win键）；与keyup一起使用，需要按下修饰键的同时，再按下其它键，然后释放其它键，事件才会被触发；与keydown使用则会正常触发事件；连着按的键也可以以点的形式连着写；
可以通过Vue.config.keyCodes.别名 = 编码；的形式只给键盘起别名；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs事件三

<body> <div class="box"> <h1>欢饮来到{{adress}}</h1> <div class="box2" @click="showInfo"> <div class="box1" @click="showInfo"> <button v-on:click.stop="showInfo">点击我</button> </di
复制链接

扫一扫