vue 中拼接html时添加点击事件

<main>
    <div ref="HTML"></div>
</main>
<script>
    created() {
        this.createHtml();
      },
      methods: {
          cesi1() {
            // 这里是因为v-html里的东西，调不到this.methods的东西，因为methods里的代码是编译后在浏览器里运行的，
            // 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
          alert("这里不会调用");
        },
        createHtml() {
         var str = `
            <ul>
              <li style="color:red" onclick="cesi1()">测试</li>
            </ul>
          `;
          this.$refs.HTML.innerHTML += str
          // 解决的方式有很多中大家可已自行百度，例如使用事件代理
          // 因为绑定的是原生事件本实例采纳的是以下解决方式
         function cesi1(){
             console.log(\'完美解决\');
         }
        //  window.cesi1=function(){
        //      console.log(\'完美解决\');
        //  }
        }

}