Narrative logic:
- How did we achieve data interaction in those years without two-way data binding
- How do we achieve data interaction after using two-way data binding?
- What is the difference between one-way data binding and two-way data binding and their applicable scenarios
Note: Don't try to reproduce my code, because one can't step through a river twice. Just look at it and understand it.
- How did we achieve data interaction in those years without two-way data binding
<app-html>
<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>
Effect:
- How do we achieve data interaction after using two-way data binding?
app-html>
<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>
Effect:
Judgment. Traditional JavaScript, and Jquery do not implement two-way data binding. But AngularJs has implemented it, so what does AngularJS do to achieve two-way data binding? Leave the monitoring of element changes to the framework instead of the programmer. What is the principle of two-way data binding?
What are the two directions exactly? Scope and view view. What is the connection between the scope and the view? Is the data data, or the model model. The straightforward explanation of two-way data binding is: change the data in the view (such as the value in the input), then the corresponding property value in the scope will also change. In turn, changes to property values in the scope are also synchronized to the view.
- What is the difference between one-way data binding and two-way data binding and their applicable scenarios
What is one-way data binding? The data bound by the ng-bind directive. Since it is one-way, from which side to which side? From scope to view. To put it more bluntly, changes to values in the scope are synchronized to the view, but changes to values in the view are not automatically synchronized to the scope. This is called one-way. So, the question is, why not all use two-way data binding but in some places and some scenarios use one-way data binding? This is where the subtle difference between
ng-bind and ng-model comes into play.
Only after the data limited by ng-bind is completely loaded will it be rendered and presented in front of us. In contrast, ng-model is just-in-time rendering, just-in-time rendering. You can imagine that a piece of data is time-consuming, or the processing process is very long. If you use the ng-model binding method, it will show you the whole process of the data change, and you only want to see to the final result. Is it inappropriate to do so? But from another point of view, if you want to see timely results, the ng-model is undoubtedly the best.