4.Vue事件处理

Vue
Vue

4.1 监听事件的Vue处理

  • 监听事件vue处理 v-on:事件名="方法" 简写@事件名=“方法”
    之前我们直接用dom原生的方式去绑定事件。vue提供了指令绑定非常方便。vm更简洁
  • vue 提供了v-on指令进行事件绑定
  • 用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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对象methods里

Vue对象中可以添加methods属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
<script>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

</script>

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<script>
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }
</script>

4.3 事件修饰符

事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是常见的需求，我们可以在methods方法调用的函数了进行实现，vue为了让methods只有纯粹的数据逻辑，不处理一些Dom事件细节，所以vue提供了事件修饰符，在指令后面以点来修饰。修饰符可以串联。
.stop 阻止单击事件冒泡
.prevent 提交事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（而不是子元素）触发时触发回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
1
2
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
  • Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符
1
2
3
4
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

还有按键修饰符

1
2
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
分享到