Ⅰ、Vue 中的 ‘v-model’ (双向绑定) 与 ‘v-bind’ (单向绑定) 的简介：
1、什么是 vue 中的 ‘v-model’ (双向绑定)？
是指：在表单控件或者组件上创建双向绑定；
(即：表单或组件等视图层上的信息发生变化，可以影响数据层的信息； 同样数据层上的信息发生变化，也可以影响视图层上的信息变化，此时称为：双向绑定)；
2、什么是 vue 中的 ‘v-bind’ (单向绑定)？
是指：在表单控件或者组件上创建单向绑定；
(即：表单或组件等视图层上的信息发生变化，可以影响数据层的信息； 但数据层上的信息发生变化，反过来却不能影响视图层上的信息变化，此时称为：单向绑定绑定)；
3、‘v-model’ (双向绑定)的实现原理是什么？
答：原理如下：
其一、要通过 ‘v-bind’ 实现视图层上信息的变化，来影响数据层上的信息变化；
其二、通过触发一个函数，将数据层上的信息变化通过函数来影响视图层上的信息变化；
Ⅱ、模拟双向绑定 (v-model) 的实现过程及显示结果：
1、双向绑定 (v-model) 的实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model='username'>
<!-- 此时的 v-model 的作用：是通过输入文本等信息(视图层的改变)，来改变数据层上的数据值； 然后再看模拟的双向绑定的视图层是否发生变化，从未可判断是否模拟成功； -->
<!-- 此时的 v-model='username' 是指：双向绑定视图层与数据层；-->
<input type="text" :value='username' @input='handle' placeholder="123456">
<!-- 而一般是将 'v-bind' 省略掉了，而以 ':' 来代替； -->
<!-- @input='handle' 是指：通过在表单中输入信息来触发 handle() 函数； -->
<!-- 此时的 :value='username' 是指：单向绑定视图层到数据层(即：视图层发生变化，数据层信息就发生变化； 而数据层信息发生变化并不能影响视图层发生变化) -->
<!-- 此时的 placeholder="123456" 是指：将 123456 信息默认显示在表单栏中； -->
</div>
<script src="./node_modules/vue/dist/vue.js"></script> <!-- 此时是引入：vue.js 文件 -->
<script>
let vm = new Vue({
el: '#app',
data() {
return {
username: '' /* 返回一个数据对象 */
}
},
methods: {
handle(event) {
// 该 event 参数是默认传过来，接收信息的形参；
this.username = event.target.value;
/* 此时的 'event.target' 就是指 input 属性值，然后通过 'event.target.value' 来获得输入的数据信息 */
//即：监听输入信息事件(input)，在输入信息有变化时，就触发 'handle()' 函数，然后将 username 的数据值修改成 view 中的 新输入的值，因此就实现了数据随着视图变化而变化；
}
}
});
</script>
</body>
</html>
2、运行的显示结果与解释：
A、运行的结果显示为：
上一栏表单是双向绑定的表单；
下一栏表单是模拟双向绑定的表单；
B、若在下一栏表单中输入信息后，上一栏表单也输出同样的信息就说明 ‘v-bind’ 的用法没问题；
成功
C、若在上一栏表单中输入信息后，下一栏表单也输出同样的信息就说明自模拟的 ‘v-model’ 的用法也没问题；
成功
Ⅲ、小结：
哪里有不对或不合适的地方，还请大佬们多多指点和交流！