首先来看看使用 vue 数据绑定的效果：
分析
- 想要实现该效果肯定需要实时监听
input框的改变； - 然后我们的内容需要用一个对象来托管，然后使用
Object.defineProperty()方法来实时监听对象中内容的变化，并将改变的内容动态赋值给input上面的标签；
关于
Object.defineProperty()的理解和使用对目前的我来说比较难，所以这里只是简单的演示如果简单写出我自己是如何写出上图效果的；
代码实现
html 结构
<body>
<p></p>
<input type="text" />
</body>
监听input框代码片段：
这步也可以称为 "从页面到数据"；
oninput 事件可以实时监听 input 框的改变，这样我们就可以将文本框中的内容实时赋值给帮我们托管内容的对象 obj；
document.querySelecter('input').addEventListener('input', (e)=>{
obj.content = e.target.value;
})
定义并初始化
// 首先对对象进行初始化，让对象中的 content 一开始就有点东西
let obj = {
content: '今天是个好天气'
}
// 这里我们将 content 的内容初始化到了页面当中
document.querySelector('p').innerText = obj.content;
document.querySelector('input').value = obj.content;
对象(数据)监听
这步也可以称为 "从数据到页面"；
Object.defineProperty() 的三个参数可以分别理解为：监听的对象，监听的键，描述符；
参考 MDN 文档，这里使用的是 存取描述符，它是由 getter 函数和 setter 函数所描述的属性；
具体对描述符的理解可以参考文档，这里我们只将它简单理解是一个对象，对象中配置了很多关于 监听对象 的很多属性和方法；
Object.defineProperty(obj, 'content', {
/* setter 函数在 obj.content = xxx 发生改变时被触发，
每次改变都会执行里面的代码，如果没有 getter，则为 undefined */
set(newval) {
// newval 形参是 content 内容每次改变的值
value = newval;
document.querySelector('p').innerText = value;
document.querySelector('input').value = value;
},
// getter 函数在输出 obj.content 时被触发，如果没有 setter，则为 undefined
get() {
return value;
}
})
以上就是一个初学 vue 者实现的简单效果，肯定有不好的地方，希望大家见谅，这些博客不仅写给未来的我看，也写给同样在学前端的人看，你们肯定比我更加优秀，加油！
当然更多的应该是没人看。=_=
