Wie man die Vue js-Anweisung in einem angehängten html-Element arbeitet

Question

Ich habe eine Vue-Direktive in einem angehängten HTML-Element wie die v-on-Direktive hinzugefügt, aber es funktioniert nicht an meinem Ende. Grundsätzlich möchte ich das Äquivalent von .on() in jquery wissen.

Answer 1

"Vue.js Kompilierung passiert, wenn Sie die Root-Instanz instanziieren/mounten. Es wird kein neues DOM erkannt, es sei denn, es ist ein Ergebnis einer Direktive (zB v-repeat, v-partially erzeugt dynamisch neues DOM Fragmente). " https://github.com/vuejs/Discussion/issues/77

Sie haben Ihre neu hinzugefügte Element wie folgt zu kompilieren:

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

Siehe diese Arbeit Fiddle auf Firefox: http://jsfiddle.net/chrislandeza/syewmx4e/

aktualisieren

$ Kompilierung hat auf Vue 2.x entfernt

Ich habe darauf hindeutet Menschen gesehen Vue.compile oder

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

Diejenigen aber, 2 verhält sich nicht wie die alt $ kompilieren.

Answer 2

Sie müssen den HTML-Code als Vorlage der Komponente registrieren.

Answer 3

Für Vue 2.x wird hier auf die neue Lösung im Dokument verwiesen: https://vuejs.org/v2/api/#vm-mount (siehe 'Beispiel').

Gewohnheit Beispiel:

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>

wirkt wie ein Zauber!