Day26-Alpine.js vs Vue.js浅谈(3)

要收假收心了~大家继续加油啦!

今天要看得比较是事件处里，
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等等
有兴趣的可以玩看看~