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的存在而使编写方式不同而已。