javascript - 关于vue中用createElement新创建的元素绑定指令无效的问题

Question

举例，以下的插入写法对于v-show这个指令来说似乎是无效的，isShow的变化不会让view变化，数据没有双向绑定了，所以，如果是新创建的元素，该如何绑定有效的指令呢？

 var newXX = document.createElement('p');
 newXX.innerHTML = "<span v-show='isShow'></span>"
 xx.appendChild(newXX)

Answer 1

创建 DOM 元素之后再创建 Vue 实例，指定 el 包含生成的元素。

Answer 2

不知道你是怎么做的，我是这么做的

1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里；
2.然后在js文件里面import进来，通过Vue.extend和new创建一个实例；
3.在append后，在Vue.nextTick回调里完成isShow的改变

我的Alert和Comfirm组件部分代码：
Box.vue：

<template>
    <transition name="fade">
        <p class="ui-alert" v-if="visible">
            <p class="ui-msg-box">
                <p class="ui-title" v-text="title">提示</p>
                <p class="ui-msg" v-text="message"></p>
                <p class="ui-buttons">
                    <a class="btn" href="javascript:;" @click="onOk">确认</a>
                    <a v-if="isConfirm" class="btn" href="javascript:;" @click="onCancel">取消</a>
                </p>
            </p>
            <p class="ui-mask"></p>
        </p>
    </transition>
</template>
<script type="text/javascript">
    export default {
        props: {
            title: String,
            message : String
        },
        data() {
            return {
                isConfirm:true,
                visible: false,
                onOk:null,
                onCancel:null
            };
        },
        methods: {
            onOk() {
                this.onOk && this.onOk();
            },
            onCancel() {
                this.onCancel && this.onCancel();
            }
        }
    }
</script>

Box.js：

import Vue from "vue";

const AlertVue = Vue.extend(require('./box.vue'));


let Message = (options = {}) => {
    
    let title = options.title || "提示",
        isConfirm = (options.isConfirm === undefined || options.isConfirm===false) ? false : true,
        message = typeof options === 'string' ? options : options.message;
        
    return new Promise((resolve, reject) => {
        let ins = new AlertVue({
            el : document.createElement("p")
        });
        
        ins.message = message;
        ins.title = title;
        ins.isConfirm=isConfirm;
        ins.onOk = () => {
            ins.visible = false;
            resolve(true);
        }
        ins.onCancel = () => {
            ins.visible = false;
            resolve(false);
        }
        document.body.appendChild(ins.$el);
    
        Vue.nextTick(() => {
              ins.visible = true;
        });
    });
}

let alert = (options = {}) => {
    let title = options.title || "提示";
    let message = typeof options === 'string' ? options : options.message;
    
    return new Message(Object.assign({
        isConfirm:false
    }, {
        title,
        message
    }));
}

let confirm = (options = {}) => {
    let title = options.title || "提示";
    let message = typeof options === 'string' ? options : options.message;
        
    return new Message(Object.assign({
        isConfirm:true
    }, {
        title,
        message
    }));
}
export default alert;
export {confirm};