06-事件监听

最新推荐文章于 2024-06-12 20:57:34 发布

青空95

最新推荐文章于 2024-06-12 20:57:34 发布

阅读量75

点赞数

分类专栏：前端文章标签： js vue

本文链接：https://blog.csdn.net/weixin_41575397/article/details/110137059

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

01-v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!--    <button v-on:click="counter++">+</button>-->
  <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
  <button v-on:click="increament()">+</button>
  <button @click="decreament()">-</button>
  <!--语法糖：简写，v-on: = @-->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter: 0
    },
    //函数的增强写法
    methods:{
      increament(){
        this.counter++
      },
      decreament(){
        this.counter--
      }
    }
  })
</script>
</body>
</html>

02-v-on的参数问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
<!--2.在事件定义中,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器产生的event事件对象作为参数传入到方法中-->
<!--  <button @click="btn2Click(123)">按钮2</button>-->
<!--本该有参数的,未传入(括号内为空),传入的值为undefind-->
<!--  <button @click="btn2Click()">按钮2</button>-->
  <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:{
            message:'你好'
        },
      methods:{
          btn1Click(){
            console.log('btn1Click');
          },
          btn2Click(event){
            console.log('-----',event)
          },
          btn3Click(abc,event){
            console.log('+++++',abc,event)
          }
      }
    })
</script>
</body>
</html>

03-v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.stop修饰符的使用-->
    <div @click="divClick">
      1111
      <button @click.stop="butClick">按钮</button>
    </div>
  <br>
<!--  2.prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
<!--  3.键盘按键的监听-->
  <input type="text" @keyup.enter="keyUp">
  <br>
  <!--4.once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        },
      methods:{
          butClick() {
            console.log("btnClick");
          },
        divClick(){
            console.log("divClick");
        },
        submitClick(){
            console.log("submitClick");
        },
        keyUp(){
            console.log("keyUp");
        },
        btn2Click(){
          console.log("btn2Click.console");
        }
      }
    })
</script>
</body>
</html>