• 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
    每天进步一点点
  • 相关阅读:
    bzoj2049 [Sdoi2008]Cave 洞穴勘测——LCT
    洛谷P2679 子串——DP
    bzoj3669 [Noi2014]魔法森林——LCT
    洛谷P3778 [APIO2017]商旅——01分数规划
    bzoj4196 [Noi2015]软件包管理器——树链剖分
    bzoj4881 线段游戏——上升序列方案数
    bzoj1426 (洛谷P4550) 收集邮票——期望
    bzoj1858 [Scoi2010]序列操作——线段树
    bzoj3626 [LNOI2014]LCA——树链剖分
    L The Digits String(没有写完,有空补)
  • 原文地址:https://www.cnblogs.com/smallstars/p/13189711.html
Copyright © 2020-2023  润新知