08、事件处理

最新推荐文章于 2024-08-11 18:40:36 发布

终是痴情负了空

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量60

点赞数

分类专栏： vue基础文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_51092575/article/details/126425690

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、事件的基本使用

事件的基本使用需注意的细节:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="root">
  <button v-on:click="showInfo">点我，提示信息(不传参)</button>
<!--  简写-->
  <button @click="showInfo2(77,$event)">点我，提示信息（传参）</button>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false
  //创建vue实例
  const vm = new Vue({
    el:'#root',
    data:{
      //
      name: '尚硅谷'
    },
    //methods配置项，可以配置回调函数
    methods:{
      showInfo(event){

        // console.log(this)
        // alert('感谢遇见')
      },
      showInfo2(event,number){
        console.log(number)
        // console.log(event.target.innerText)
        // console.log(this)
        // alert('感谢遇见')
      }
    }
  })

</script>
</body>
</html>

延展：
methods方法：
（1）作用：使⽤ methods属性给 Vue 定义⽅法：
methods 的基本语法：

var vm = new Vue({
	methods:{
	//在此时定义方法，方法之间使用逗号分隔
	方法名:function()0
);

案例：

methods:{
      showInfo(){
        alert('感谢遇见')
      }
    }

methods方法中的this指向vm，所以在 methods
⽅法中访问 data的数据，可以直接通过 this.属性名的形式来访问；

2、Vue中的事件修饰符

prevent:阻止默认事件(常用)
stop:阻止事件冒泡(常用) ;
once:事件只触发-次 (常用) ;
capture:使用事件的捕获模式;
self:只有event . target是当前操作的元素时触发事件:
passive:事件的默认行为立即执行，无需等得事件回调执行完毕;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<style>
  *{
    margin-top:30px ;
  }
  .demo{
    background: red;
  }
  .box1{
    padding: 5px;
    background: deepskyblue;
  }
  .box2 {
    padding: 5px;
    background: orange;
  }
  .list{
    width:200px;
    height: 200px;
    background: salmon;
    overflow: auto;
  }
  .list li{
    height: 100px;
  }
</style>
<body>
<!--容器-->
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <a href="http://atguigu.com" @click.prevent="showInfo">点我</a>
  <div class="demo" @click="showInfo">
    <button @click.stop="showInfo"> 点我</button>
  </div>
  <!--事件只触发一次-->
  <button @click.once="showInfo">点我提示信息,只在第一次点击生效</button>

  <!-- capture事件的捕获模式 让事件以捕获的方式来处理(先捕获再冒泡)-->
  <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">div2</div>
  </div>
  <!-- self 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡)-->
  <div class="demo" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
  </div>
  <!--passive：事件的默认行为立即执行，无需等待事件回调执行完毕；-->
  <!--scroll滚动条一滚动就会触发的事件 wheel鼠标滚轮事件-->
  <ul class="list" @scroll.passive="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false
  //创建vue实例
  new Vue({
    el:'#root',
    data:{
      name: '尚硅谷'
    },
    methods:{
      showInfo(event) {
        alert('hello')
      },
      showMsg(msg){
        console.log(msg)
      },
      demo(){
        for(let i = 0; i < 100000; i++){
              console.log('#')
          }
          console.log('累了吧')
      }
    }
  })

</script>
</body>
</html>

3、键盘事件

1.Vue中常用的按键别名

回车=>enter
删除=>delete(插获“鹏除”和“退格”键)
退出=>esc
空格=>space
换行=> tab (特殊，需要配合keydown使用)
上=> up
下 => down
左=>left
右=>right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键（用法特殊）:ctrl、alt、 shift、meta(window)

配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他健，事件才被触发；
配合keydown使用:正常触发事件；

4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义健名=健码，可以去定制按健别名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="root">
  <h1>欢迎到{{name}}学习 </h1>
  <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

  <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">
  <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
  //创建vue实例
  new Vue({
    el:'#root',
    data:{
      name: '尚硅谷'
    },
    methods:{
      showInfo(e){
        console.log(e.target.value)
      }
    }
  })

</script>
</body>
</html>

注：

<!--  修饰符可以连续写-->
  <a href="http://www.atquigu.com" @click.prevent.stop="showInfo">点我</a>

<!--  点击Ctrl+y才可以生效-->
  <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">

终是痴情负了空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08、事件处理

事件处理键盘事件修饰符
复制链接

扫一扫

专栏目录