要收假收心了~大家繼續加油啦!

今天要看得比較是事件處裡，
Alpine.js和Vue.js都可直接將事件寫在標籤內，
在Alpine.js中使用：x-on:事件="" 簡寫@事件=""
在Vue.js中使用：v-on:事件="" 簡寫@事件=""

那我們看看範例吧

Alpine.js

(1)直接將欲執行德函式放在事件裡面
html

// inline
<div x-data="{ post: { title: 'My first post' } }">
  <button x-on:click="confirm(`Want to delete: ${post.title}?`)">
    Delete
  </button>
</div>

(2)呼叫寫在js裡的函式
html

// dedicated function
<div x-data="{ post: { title: 'My first post' } }">
  <button x-on:click="deletePost(post)">
    Delete
  </button>
</div>

js

function deletePost(post) {
confirm(`Want to delete: ${post.title}?`)
}

另外兩者也都可以使用$event屬性，
但要注意的是他只能在DOM裡使用，
像是<button @click="deletePost(post, $event)"></button>

在Alpine.js中也提供了許多事件的用法
keydown, away, prevent, passive, stop, debounce, self, once, window等等
有興趣的可以玩看看~