vue中动态添加节点和动态绑定事件

需求：在vue模块中需要动态append一段dom节点代码，同时代码里面有@click等绑定事件，但是绑定事件无效

原因：vue开发的代码是需要挂载编译后，再渲染成html代码的，直接append进去不认识vue的语法

 

解决方法一：先手动挂载需要添加的节点，再追加到代码里。参考以下代码

createMapAuthSetting: function () {
    var app = Vue.extend({
        data: function () {
            return {
                openMask: true
            };
        },
        methods: {
            cancelMap: function () {
                this.openMask = false;
                jm.cookie("isAuthMap", null);
                MallHelper.ing("需要访问位置才能规划路线");
            },
            accessMap: function () {
                this.openMask = false;
                jm.cookie("isAuthMap", true);
            }
        },
        template:
            '<div class="map_mask" v-if="openMask">' +
                '<div class="map_container">' +
                    '<div class="map_img"></div>' +
                    '<div class="title">商家助手想要访问您的地理位置</div>' +
                    '<div class="message">您有同城配送订单，提供您的位置， 我们将为您规划更精确的路线。</div>' +
                    '<div class="btn_container">' +
                        '<div class="not_allow not_allow_font" @click="cancelMap()">不允许</div>' +
                        '<div class="allow allow_font" @click="accessMap()">好</div>' +
                    '</div>' +
                '</div>' +
            '</div>'
    });
    var mapComponent = new app().$mount(); //手动挂载
    $("body").append(mapComponent.$el); //追加到body里，这时候的代码已编译好

 

解决方法二：可以不用vue语法@click来绑定事件，用jquery语法绑定

$(".btn_container").on("click",  ".not_allow ",  function () {});