Vue.js笔记5—事件处理

v-on

v-on 指令监听 DOM 事件，缩写@

• 简单事件直接写

  <div id="app">
    <button v-on:click="count += 1">Add 1</button>
    <p>按钮被点了 {{ count }} 下</p>
  </div>
  

  var vm = new Vue({
    el: '#app',
    data: {
      count: 0
    }
  })
  

• 较复杂时在methods定义方法并监听

  <div id="app">
    <button @click="greet">Greet</button>
  </div>
  

  var vm = new Vue({
    el: '#app',
    data: {
      name: '小明'
    },
    methods: {
      greet: function (event) {
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName)
        }
      }
    }
  })
  

• 内联js语句中调用

  <div id="app">
    <button @click="say('hi')">Say hi</button>
    <button @click="say('what')">Say what</button>
  </div>
  

  new Vue({
    el: '#app',
    methods: {
      say: function (message) {
        alert(message)
      }
    }
  })
  

  如果需要访问原始的 DOM 事件。可以传入 $event ：

  <button @click="say('hi',$event)">Say hi</button>
  

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 阻止对元素自身的点击 -->
<div @click.self.prevent="doThat">...</div>

按键修饰符

<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<!-- keyCode attribute  -->
<input v-on:keyup.13="submit">
<!-- 自定义按键修饰符别名 -->
Vue.config.keyCodes.f1 = 112

系统修饰符

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

• .exact修饰符 修饰符允许你控制由精确的系统修饰符组合触发的事件

  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button v-on:click.ctrl="onClick">A</button>
  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button v-on:click.ctrl.exact="onCtrlClick">A</button>
  

• 鼠标按钮修饰符 .left、.right、middle