1. Start from zero

<div>
  <button onclick="greet()">Greet</button>
</div>
<script>
    function greet(){
        alert("html and javascript");
     }
</script>

This is a very simple example, but it is a web page, so it cannot be encapsulated or modular.
No modularity is a pain point in Web pages. Early w3c standards for web component were outlined, but later they were abolished.
So there are three main frames out of the people, Angular, React and Vue.These three frameworks can be modular. Perhaps you've also heard about BEM and you can get on-line with popular science.They also provide concepts such as data binding, MVVM (not covered in this article, too tired to write).
What's more, it's a new development tool, which you can understand as the WEB modular tool, airoot-uisys, which just came out of v1 this year. It's really good, it has a separate parsing engine, and it compiles very quickly in real time.
OK, so let's look at how these guys bind events.

1. Angular event binding

<div ng-app="myApp" ng-controller="myctrl">
    <button ng-click="greet()">Greet</button>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myctrl', function($scope) {
        $scope.greet = function() {
           alert("Angular");
        };
    });
</script>

2. React event binding

<div id="example"></div>
<script type="text/babel">
function App() {
  function greet(e) {
      e.preventDefault();
    alert('React');
  }
  return (
    <button  href="#" onClick={greet}>Greet</button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);
</script>

3. Vue Event Binding

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>
<script>
    var vue = new Vue({
          el: '#app',
          data: {
            name: 'Vue.js'
          },
          methods: {
            greet: function (event) {
                  alert("Vue.js");
            }
          }
    });
</script>

4. UISYS Event Binding

<div>
  <button onclick="@this.greet()">Greet</button>
</div>
<script>
    func greet(){
        alert("airoot uisys");
     }
</script>

uisys is more flexible to use and can be written as follows:

<div>
  <button id="greet">Greet</button>
</div>
<script>
    greet.addEventListener("click",func(){
        alert("airoot uisys");
     });
</script>

You can also at the origin:

<div>
  <button id="greet">Greet</button>
</div>
<script>
    //Note that if you get it through getElementById, you need to precede the green with a $
    document.getElementById("$greet").addEventListener("click",func(){
        alert("airoot uisys");
     });
</script>

2. The calf knife

1. Vue

<div id="app">
    <div v-if="flag" @click="greet()">
     //Add Products
    </div>
    <div v-else>
     //Add Products
    </div>
</div>
<script>
    var vue = new Vue({
          el: '#app',
          data: {
            flag: true
          },
          methods: {
            greet: function (event) {
                  alert("Vue.js");
            }
          }
    });
    //You can click at first, and after 5 seconds the click effect will no longer work.
    setTimeout(function(){
        vue.flag = false;
    },5000);
</script>

2. uisys

<div id="app">
    //Add Products
</div>
<script>
    func greet(){
        alert("airoot uisys");
    }
    
    set flag(value){
        app.onclick = value ? greet : null;//ternary operator
    }
    
    //Initialization function
    func init(){
        flag = true;
        //You can click at first, and after 5 seconds the click effect will no longer work.
        setTimeout(function(){
            flag = false;
        },5000);
    }
</script>

3. Summary

The three main web frameworks and airoot uisys have all been introduced.Event binding is great, except that some of angluar's small partners may wonder what's so complex about angluar. In fact, angluar was designed with a lot of consideration for large enterprise projects at the beginning, and its components are the most mature. React and Vue are not google after allThat's complicated, so when angluar started school, he felt a little "pant-free and farting". But if you learn more, you'll understand the author's dilemma.

But it's not that React and Vue are not as good as angluar. As the saying goes, "A journey of ten thousand miles begins with a faltering pace." React and Vue communities are growing larger and larger, and the components that mimic angluar and adobe flex are almost the same, so it's hard to distinguish between them.

Finally, evaluate the refreshing airoot uisys. To be honest, this fellow does exactly the same thing as the three main WEB frameworks. He writes the whole HTML parsing once, then generates html, JS code through his own parsing engine, which is the bottom layer of the browser. So it is certainly more efficient to modularize it. If you know the difference between Docker and VMware, uisysIt is the Docker principle, and the three main frameworks are the VMWare principle.So uisys is really suspended, but now companies choose platforms that look at the ecosphere and components, or simply don't want to write more, so uisys is inferior. But now uisys is pushing TMax framework, legends can change various JS plug-ins into HTML, and various "star-sucking methods" are waiting to be seen.

OK, the front-end is really challenging, learning well is a creative experience, learning poorly will become a printer (do the same interface, will press the design barrier plug-in).I hope you all become a great Full Stack Developer. Thank you for watching.