Detaillierte Erläuterung der benutzerdefinierten Anweisungen von Vue.directive

Dieses Mal erkläre ich Ihnen die benutzerdefinierten Anweisungen von Vue.directive ausführlich. Vorsichtsmaßnahmen Hier sind praktische Fälle.

1. Heute habe ich den Code der benutzerdefinierten Anleitung von Vue überprüft und ein sehr sprachloses Ergebnis erhalten. Ich werde den Code zuerst veröffentlichen.

2.

<p id="example" v-change-by="myColor"></p>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
  </script>

3. Als die Seite geöffnet wurde, war sie leer, die Breite und Höhe waren festgelegt und p wurde nicht schwarz. Überprüfen Sie, ob der Code korrekt ist und keine

Grammatikfehler vorliegt. Dann überlegte ich, ob es ein Problem mit der Datei vue.min.js war, lud dann die Entwicklungsversion von der offiziellen Website herunter und verwendete vue.js. Das Ergebnis war eine überraschende Entdeckung.

4. Es stellt sich heraus, dass die Produktionsversion vue.min.js keine Fehlerberichterstattung unterstützt, was wirklich eine Falle ist!

5. Endlich verstehe ich den Grund und es ist sehr wichtig, dass die Anweisung vor dem Vue-Instanziierungsobjekt

geschrieben werden muss, sonst wird ein Fehler als Fehler beim Auflösen der Direktive gemeldet ; schließlich den richtigen Sequenzcode posten

6. Die endgültige Ausgabeseite ist perfekt ... kleine Probleme, auf die man achten sollte.

<p id="example" v-change-by="myColor"></p>
  <script>
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
  </script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den automatischen Generator in ionic2

Detaillierte Erläuterung der Verwendung von JsChart-Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der benutzerdefinierten Anweisungen von Vue.directive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!