叙述逻辑：
- 没有双向数据绑定的那些年我们是如何实现数据交互的
- 采用双向数据绑定后的我们又是怎样实现数据交互的
- 单向数据绑定和双向数据绑定的区别在哪里以及各自的适用场景
注意事项：不要视图重现我的代码，因为人不能两次踏进通过一条河流。看看就行，理解就可以啦。
- 没有双向数据绑定的那些年我们是如何实现数据交互的
<html ng-app>
<head>
<meta charset="utf-8">
<title></title>
<!--<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>-->
</head>
<body>
<input type="text" id="aaa"/><br>
<span id="bbb"></span>
<script type="text/javascript">
var aaa = document.getElementById("aaa");
var bbb = document.getElementById("bbb");
aaa.onkeyup = function() {
bbb.innerHTML = aaa.value;
}
</script>
</body>
</html>
效果：
- 采用双向数据绑定后的我们又是怎样实现数据交互的
html ng-app>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<input type="text" ng-model="aaa"/><br>
<span>{{aaa}}</span>
</body>
</html>
效果：
高下立判。传统的JavaScript，以及Jquery都没有实现双向数据绑定。但是AngularJs实现了，那么AngularJS到底做了什么导致可是实现双向数据绑定呢？将元素变化的监听过程交给框架来处理而不是交给程序员。双向数据绑定的原理是什么呢？
双向具体是哪两个呢？作用域Scope和视图view。连接着scope和view的又是什么呢？是数据data，或者说模型model。双向数据绑定的直白解释就是：更改视图中的数据（比如input中的值），那么作用域中对应的属性值同样也会改变。反过来，scope作用域中属性值的改变也会同步到视图中。
- 单向数据绑定和双向数据绑定的区别在哪里以及各自的适用场景
什么是单向数据绑定？ng-bind指令绑定的数据。既然是单向，那么是从哪一方到哪一方？从作用域到视图。说得更加直白一点就是，作用域scope中值得改变会同步到视图中，但是视图中值的改变不会自动同步到作用域中。这就叫单向。那么，问题来了，为什么不全部采用双向数据绑定而要在某些地方，某些场景采用单向数据绑定呢？这就要涉及到
ng-bind和ng-model之间的细微差别。
只有ng-bind所限定的数据完全被加载完毕之后才会进行渲染，呈现在我们面前。与之相对，ng-model是及时渲染，及时呈现。你可以想象一下，一个数据比较耗时，或者加工处理过程很长，假如你采用ng-model的绑定方式，那么它会将这个数据变化的全过程都展现在你面前，而你只希望看到最后结果。那这么做是不是很不合适。可是从另一个角度来看，如果你希望看到及时的效果，那ng-model无疑是最好的。