Vue 框架学习(三) 事件监听

1、v-on 事件监听：

<body>
  <div id ="app">
    <p>
    <h2>counter: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    </p>

    <!-- btn1有一个参数，这里不给参数自动返回浏览器自己生成的Event事件对象 -->
    <button @click="btn1">按钮1</button>
    <!-- 传入参数 -->
    <button @click="btn2('Stars')">按钮2</button>
    <!-- 既传参又需要获得Event事件对象 -->
    <button @click="btn3('Stars', $event)">按钮3</button>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        counter: 0,
      },
      methods: {
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        },

        btn1(event){
          console.log('btn1: ',event);
        },
        btn2(lastName){
          console.log('btn2: ',lastName);
        },
        btn3(lastName,event){
          console.log('btn3: ',lastName,event);
        },

      },
      computed: {},
    });
  </script>

</body>
View Code

 

2、v-on的修饰符

<body>
  <!-- .stop 阻止事件冒泡 -->
  <div id ="app">
    <div @click="divclick">
      Btuton: 
      <button @click.stop="btnclick">按钮</button>
    </div>

    <!-- .prevent 阻止默认事件 -->
    <input @click.prevent="submitclick" type="submit" value="提交">

    <br>
    <!-- .监听键帽动作 -->
    <!-- 
      1、 keydown: 键帽按下
      2、 keyup: 键帽抬起
      3、 .enter: 监听enter键帽
     -->
    <input type="text" @keyup.enter="keyup">

    <!-- .once只能点一次 -->
    <button @click.once="onceclick">按钮</button>


  </div>

  



  
  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        divclick(){
          console.log('divclick');
        },
        btnclick(){
          console.log('btnclick');
        },
        submitclick(){
          console.log('submitclick');
        },
        keyup(){
          console.log('keyup');
        },
        onceclick(){
          console.log('onceclick');
        }
      },
      computed: {},
    });
  </script>

  </body>
View Code

 

posted @ 2020-06-24 20:34  北冥雪  阅读(265)  评论(0)  编辑  收藏  举报