Vue.js 如何使Vue js指令在附加的html元素中工作

我在附加的html元素中添加了一个Vue指令，比如v-on指令，但它在我这方面不起作用。基本上，我想知道jquery中.on（）的等价物。

您需要将html注册为组件的模板。

“Vue.js编译发生在您实例化/装载根实例时。它不会检测到正在注入的新DOM，除非它是指令的结果（例如，v-repeat、v-partial将动态创建新的DOM片段）。”

您必须像这样编译新添加的元素：

html:

---

但是，这两个解决方案的行为与Vue 2.x的旧的$compile

不同，新的解决方案在文档中引用：（参见“示例”）

自定义示例：

var MyComponent=Vue.extend({
模板：“你好！”，
方法：{
世界：功能（）{
console.log（'world'））
}
}
})
var component=new MyComponent（）.$mount（）
document.getElementById（'app'）.appendChild（component.$el）

@Alexandros，因为我在小提琴的外部资源上使用了原始github。我刚刚修复了它并更新了我的答案。对此表示抱歉。遗憾的是，它在新的vue版本中不再有效。首先，click事件的语法已更改。其次，不再有“$compile”函数（可能已重命名）。如果删除编译和修复语法，则“添加”按钮起作用，但新按钮不起作用。

<div id="app">
    <button v-on="click: addNewElement()">Add Element</button> 
    <br />
</div>

new Vue({
    el: '#app',
    data: {
        sampleElement: '<button v-on="click: test()">Test</button>'
    },
    methods:{
        addNewElement: function(){

           var element = $('#app').append(this.sampleElement);
           /* compile the new content so that vue can read it */
           this.$compile(element.get(0));
        },
        test: function(){
           alert('Test');
        }
    }
});

var tmp = Vue.extend({ 
    template: 'Content'
})
new tmp().$mount(' id or refs ')