zoukankan      html  css  js  c++  java
  • Vue入门系列(四)之Vue事件处理

    Vue官网:

    https://cn.vuejs.org/v2/guide/forms.html#基础用法

    【入门系列】

    (一)  http://www.cnblogs.com/gdsblog/p/7804785.html

    (二)   http://www.cnblogs.com/gdsblog/p/7804770.html

    (三)   http://www.cnblogs.com/gdsblog/p/7804758.html

    (四) http://www.cnblogs.com/gdsblog/p/7804758.html

    (五) http://www.cnblogs.com/gdsblog/p/7804686.html

    【本文转自】

      http://www.cnblogs.com/fly_dragon

    4.1. 监听事件的Vue处理

    Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻底。所以还是推荐大家使用的。

    Vue提供了v-on指令帮助我们进行事件的绑定。 基本的内联事件处理方法[官方demo]:

    <div id="example-1">
      <!-- 为按钮绑定点击事件,执行counter += 1的任务。 -->
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    <script>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })
    </script>
    

    4.2. 事件处理方法集成到Vue对象

    内联的方式绑定的事件,只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便,也不容易出错。 Vue对象中可以添加methods属性,开发者可以把事件处理函数的逻辑放到methods中。

    <!DOCTYPE html> 
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue入门之动态显示表格</title>
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="app">
        <p>{{ number }}</p>
        <input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber">
        <input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()">
      </div>
      <script>
        var app = new Vue({         
          el: '#app',               
          data: {                   
            number: 1
          },
          methods: {
            // 事件响应方法的逻辑代码
            getNumber: function (e) {
              this.number += 1;   // 不管是内联方法调用,还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
            }
          }
        });
      </script>
    </body>
    </html>
    

    4.3. 事件修饰符

    官网上写的非常好,这块就直接用管网的吧。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- the click event will be triggered at most once -->
      <a v-on:click.once="doThis"></a>
      

    4.4. 按键修饰符

    在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">
    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">
    

    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获 “删除” 和 “退格” 键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • .ctrl
    • .alt
    • .shift
    • .meta

    4.5. 事件绑定的简写

    Vue中属性的绑定的简写直接是: === 'v-bind:'
    而事件的缩写是直接变成@. 也就是说: v-on: === @ 看下面的例子:

    <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>
    

    4.6. 事件绑定总结

    Vue为了方便大家进行开发,提供了事件的相关的封装,可以让我们方便我们用Vue对事件进行开发,尤其是v-on指令的非常方便的跟Vue对象中methods进行配合进行复杂的事件处理,非常方便。另外事件的事件修饰符和按键修饰符也可以让Vue事件这块锦上添花。

    Github地址:源码下载
    其他详情请参考:http://aicoder.com/vue/preview/all.html

  • 相关阅读:
    sqlserver中判断表或临时表是否存在
    Delphi 简单方法搜索定位TreeView项
    hdu 2010 水仙花数
    hdu 1061 Rightmost Digit
    hdu 2041 超级楼梯
    hdu 2012 素数判定
    hdu 1425 sort
    hdu 1071 The area
    hdu 1005 Number Sequence
    hdu 1021 Fibonacci Again
  • 原文地址:https://www.cnblogs.com/gdsblog/p/7804747.html
Copyright © 2011-2022 走看看