v-on参数问题与修饰符

参数问题

<!DOCTYPE HTML>

<HTML>
<head>
  <meta charset="UTF-8"/>
  <title></title>

</head>
<body>
<div id="app">
  </h2>
  <!--  事件调用没有参数-->
  <button @click="btnClick">按钮1</button>
  <button v-on:click="btnClick()">按钮1
  </button>
<!--  在写函数时候，事件定义忽略了小括号，但方法本身需要参数-->
<!--  <button v-on:click="btnClick2()">按钮2</button>-->
  <button v-on:click="btnClick2">按钮2</button>
<!--  需要事件传递时，省略小括号，直接传递事件-->

<!--  方法定义时，不仅需要event，也需要其它参数-->
<!--  <button v-on:click="btn3(log,event)">按钮3</button> event会被当成普通参数处理-->
  <button v-on:click="btn3('1',$event)">按钮3</button>
</div>
<script src="../vue.js"></script>
<script>
  const vm = new Vue({
    el:'#app',
    data:{
      message:'ds',
      counter:0
    },
    methods:{
      btnClick(){
        console.log('btnclick')
      },
      // btnClick2(ab){
      //
      //   console.log(ab)
      // }
      btnClick2(event){

        console.log(event)
      },
      btn3(a,event){
        console.log(a+' --'+event)
      }
    }
  })
  // function  a(name) {
  //默认是undefined
  //   console.log(name)
  // }
  //  a()
</script>
</body>
</HTML>

修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> </title>
</head>
<body>
<!--.stop修饰符的使用-->
<div id="app">
  <div @click="divClick">
    11
    <button @click.stop="btnClick">点击</button>

  </div>

<!--  2.prevent函数的使用-->
  <form action="'">
    <input type="submit" value="提交" @click.prevent="subClick">
  </form>

<!--  监听某个键盘的按键-->
  <input type="text" @keyup.enter="keyClick">
<!-- .once-->
  <button @click.once="btn2Click">按钮2</button>
</div>
<script src="../vue.js"/>
<script>
  const vm= new Vue({
    el:'#spp',
    // data:,
    methods:{
    divClick(){
     console.log('divclick')
    } ,
    btnClick(){

      console.log('btnClcik')
    },
     subClick(){

       console.log('subClcik')
      },
    keyClick(){
      console.log('keyupor down')
    },
    btn2Click(){
      console.log('btn2')
    }
  },

  })

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

 

posted @ 2021-04-10 11:27  好吗，好  阅读(39)  评论(0)    收藏  举报