今天要來介紹Alpine.js和Vue.js的雙向資料綁定，
這是非常實用的東西呢，
它可以使輸入的值與組件保持同步。
(在Day5也有做介紹喔!)
html
<div x-data="{ title: '' }">
<h3 x-text="title"></h3>
<input type="text" x-model="title" />
</div>
html
<template>
<div>
<h3>{{ title }}</h3>
<input type="text" v-model="title">
</div>
</template>
js
export default {
name: 'App',
data() {
return {
title: ''
}
}
}
兩者極為類似，
最終還是差在是否有虛擬DOM的存在而使編寫方式不同而已。
iThome鐵人賽
看影片追技術