iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
1
自我挑戰組

愛寫什麼就寫什麼,開心最重要系列 第 26

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等等
有興趣的可以玩看看~


上一篇
Day25-Alpine.js vs Vue.js淺談(2)
下一篇
Day27-Alpine.js vs Vue.js淺談(4)
系列文
愛寫什麼就寫什麼,開心最重要30

尚未有邦友留言

立即登入留言