• 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
    每天进步一点点
  • 相关阅读:
    python 上传下载文件
    post方式加载iframe
    js 实现打印功能
    python 判断数据类型
    web样式无法正常显示
    C# 调用python
    PDF转换成Txt
    js预览PDF的插件(亲测支持IE9,火狐,等等)
    文件下载
    asp.net网站发布到服务器GET的技能
  • 原文地址:https://www.cnblogs.com/smallstars/p/13189711.html
Copyright © 2020-2023  润新知