iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
1
自我挑戰組

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

Day27-Alpine.js vs Vue.js淺談(4)

今天要來介紹Alpine.js和Vue.js的雙向資料綁定
這是非常實用的東西呢,
它可以使輸入的值與組件保持同步。

Alpine.js

(在Day5也有做介紹喔!)
html

<div x-data="{ title: '' }">
  <h3 x-text="title"></h3>

  <input type="text" x-model="title" />
</div>

Vue.js

html

<template>
  <div>
    <h3>{{ title }}</h3>

    <input type="text" v-model="title">
  </div>
</template>

js

export default {
  name: 'App',
  data() {
    return {
      title: ''
    }
  }
}

兩者極為類似,
最終還是差在是否有虛擬DOM的存在而使編寫方式不同而已。


上一篇
Day26-Alpine.js vs Vue.js淺談(3)
下一篇
Day28-Alpine.js vs Vue.js淺談(5)
系列文
愛寫什麼就寫什麼,開心最重要30

尚未有邦友留言

立即登入留言