[Day29] Vue3 - 事件绑定

在 Javascript 中会用 onclick, onchange...等方式监听 DOM 物件，而 Vue 则是在 HTML 的标签里面加上 v-on 就可以做事件绑定，马上来练习该怎麽使用吧。

JS 范例程序码

同样的，先写一段 JS 范例，下面不再重复撰写

const vm = Vue.createApp({
  data () {
    return {
      num: 0,
      text: '',
    }
  },
  methods: {
    addOne () {
      this.num++;
    },
    changeNum(n) {
      this.num = n;
    }
  }
}).mount('#app');

v-on

Vue 的事件绑定写法是在 HTML 标签里面加上 v-on:使用者行为="执行程序"，可以直接写程序码，或是呼叫函式；除此之外，v-on: 也能简写成一个 @，非常简洁方便：

1. 直接在标签内执行程序码。

   <p>一共点了 {{ num }} 下</p>
   <button v-on:click="num++"></button>
   

2. 呼叫函式。

   <p>一共点了 {{ num }} 下</p>
   <button v-on:click="addOne"></button>
   

3. 简写方式

   <p>一共点了 {{ num }} 下</p>
   <button @click="addOne"></button>
   

v-on & 修饰子

在处理事件时，时常会用到 preventDefault, stopPropagation...等等方法，Vue 提供了修饰子快速达成需要的功能。

1. .stop
   等同於 stopPropagation，下面这段程序码在点击 "show 2" 的文字後 num 会变成 2，而不会变成 1。

   <div @click="changeNum(1)">
     <p>num: {{ num }} </p>
     <div @click.stop="changeNum(2)">show 2</div>
   </div>
   

2. .prevent
   等同於 preventDefault，最常用在超连结上。

   <a href="#" @click.prevent="text='prevent'">Prevent</a>
   <p>{{text}}</p>
   

3. .capture
   capture 会先触发，所以下面的程序码点击後是显示 2。

   <div @click.capture="changeNum(1)">
     <div @click="changeNum(2)">
       <div @click="changeNum(3)">clickMe!</div>
     </div>
   </div>
   <p>{{num}}</p>
   

4. .self
   只会触发自己和外层的元素事件，内层元素不会触发。
5. .once
   只会触发一次，之後都不会再触发事件。
6. .passive
   .passive 就是 anti-prevent，只要有他在， prevent 就不能作用，主要用来改善 scroll 事件的顺畅度。

键盘修饰子

• Vue 提供了各种常用案件的修饰子，列表如下：
  • .enter
  • .tab
  • .delete (Delete & Backspace 都适用)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .shift
  • .alt
  • .meta ( Windows 的视窗键 || MacOS 的 command 键）
• 功能键几乎都用对应的修饰子，而普通按键则是使用对应代码，以下是官方的范例码：

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

• 精确判断按键事件（.exact）
  预设如果同时按下两个以上按键，只要有一个有撰写事件，就会触发，如果想避免这个状况，就在最後加上.exact，这样只有在按下一样的按键（或组合）的时候才会触发。

滑鼠修饰子

滑鼠相对简单多

• .left
• .right
• .middle