<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="app">
      <div class="nn" @click="nnClick">111</div>
    </div>
  </body>
  <script>
    let nn = document.querySelector(".nn");
    let nn_attr = nn.attributes;
    let methods = {
      nnClick: function() {
        console.log("dynamic add click");
      }
    };
    function execlick() {
      let flag = true;
      let index = 0;
      return function() {
        for (let key in nn_attr) {
          index++;
          if (typeof nn_attr[key] == "object") {
            if (nn_attr[key].nodeName == "@click") {
              nn.addEventListener("click", methods[nn_attr[key].nodeValue]);
              nn.removeAttribute("@click");
              flag = false;
              break;
            }
            if (nn_attr.length == index) {
              flag ? console.error("have not @click attribute") : "";
            }
          }
        }
      };
    }
    let fn = execlick();
    fn();
  </script>
</html>