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

【问题标题】：How to make Vue js directive working in an appended html element如何使 Vue js 指令在附加的 html 元素中工作
【发布时间】：2015-08-13 07:28:15
【问题描述】：

我在附加的 html 元素中添加了一个 Vue 指令，例如 v-on 指令，但它对我来说不起作用。基本上我想知道 .on() 在 jquery 中的等价物。

【问题讨论】：

标签： vue.js

【解决方案1】：

"Vue.js 编译发生在您实例化/挂载根实例时。它不会检测到新的 DOM 注入，除非它是指令的结果（例如 v-repeat，v-partial 将动态创建新的 DOM 片段)。” https://github.com/vuejs/Discussion/issues/77

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

html:

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

JavaScript

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');
        }
    }
});

在 Firefox 上查看这个工作小提琴： http://jsfiddle.net/chrislandeza/syewmx4e/

更新

$compile 已在 Vue 2.x

上移除

我看到有人建议 Vue.compile 或

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

但那 2 的行为不像旧的 $compile。

【讨论】：

@Alexandros 因为我在小提琴的外部资源上使用了原始 github。我刚刚解决了这个问题并更新了我的答案。很抱歉。
遗憾的是，它不再适用于新的 vue 版本。首先，点击事件的语法发生了变化。其次，不再有“$compile”函数（可能已重命名）。如果您删除编译和修复语法，添加按钮可以工作，但新按钮什么也不做。

【解决方案2】：

对于 Vue 2.x，文档中引用了新的解决方案：https://vuejs.org/v2/api/#vm-mount（参见“示例”）。

自定义示例：

var MyComponent = Vue.extend({
  template: '<div v-on:click="world">Hello!</div>',
  methods : {
    world : function() {
      console.log('world')
    }
  }
})
 
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app"></div>

像魅力一样工作！

【讨论】：

【解决方案3】：

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

【讨论】：