动态添加dom元素，并绑定VUE事件

当我有这个需求的时候，去网上搜索了很久，都没找到通俗易懂的指导，后面还是解决了这个问题，在这里记录一下：

需求：我需要根据数据在 table 的 td 中动态添加可用时间块 div，并能点击触发相应的VUE方法；

解决：
因为VUE是先编译，后执行，所以元素上的方法要预先绑定。

这是我们定义的VUE组件，放在最外层：

var periodDiv = Vue.extend({
        template: "<div @click='toBook($event);' class='class-item' title='book this period'>" +
            "Available" +
            "</div>",
        methods: {
            toBook: function ($event) {
                var idStr = $event.target.getAttribute("id").trim();
                var periodId = idStr.split("period");  // 获取点击元素的id
                myApp.bookPeriodId = periodId[1]; // 调用myApp的data
                myApp.doBook(); // 调用myApp的方法
            }
        }
    });

这是整个页面的VUE实例：

var myApp= new Vue({
        el: "#app",
        data: {
            bookPeriodId: null
        },
        methods: {
            doBook: function () {
                alert(this.bookPeriodId);
            },
            initTable: function () {
                ....
                if (period.status) {
                    var component = new periodDiv().$mount();  // 每次添加需要重新new一个
                    var $dom = $(component.$el);  // 获取动态元素的jquery对象
                    $dom.attr("id", period.id);
                    $("#periodTable").children("td").eq(0).append($dom);  // 添加元素至相应位置

                }
            }
        }
    })

记住，这两个实例是同级的。

后面又找到一个超级简单的方法，一行代码解决：

$(".personality-filter").on("click", ".list-body-item", this.doFilterTutor);

this.doFilterTutor是在VUE里定义的方法，记住不要加括号，否则会执行一次；
“.list-body-item"为动态添加的元素，放置在父元素”.personality-filter"下；
这段代码可以放在VUE自定义的任何的方法里；
这是通过jquery on动态绑定的机制实现的，它会去父元素（.personality-filter）下找相应的子元素（.list-body-item），并触发相应事件；

动态添加dom元素，并绑定VUE事件

悦读