Es wurde ein Problem mit benutzerdefinierten Direktiven in Vue.directive gefunden

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Probleme mit den benutzerdefinierten Anweisungen von Vue.directive dar.

1 Heute habe ich den Code der benutzerdefinierten Anweisungen von Vue überprüft und ein sehr sprachloses Ergebnis erhalten . , poste zuerst den Code.

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. Wenn die Seite geöffnet wird, ist sie leer, die Breite und Höhe sind festgelegt, p jedoch nicht schwarz werden. Überprüfen Sie, ob der Code korrekt ist und keine Syntaxfehler vorliegen. 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 habe ich den Grund verstanden und es ist sehr wichtig, dass die Anweisung vor dem Vue-Instanziierungsobjekt geschrieben werden muss, andernfalls wird ein Fehler als Fehler beim Auflösen der Anweisung gemeldet. Schließlich wird der richtige Sequenzcode gepostet

<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>

6. Die endgültige Ausgabeseite ist perfekt ... kleine Probleme, bitte beachten.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ausführliche Erläuterung der Deduplizierung und Optimierung numerischer Arrays mithilfe von js zum Aufbau eines Binärbaums

Ausführlich Erläuterung der globalen Einführung der Bass-SCSS-Verarbeitungslösung durch Vue

Tutorial zum Erstellen eines eigenen Befehlszeilentools mithilfe von Node

Das obige ist der detaillierte Inhalt vonEs wurde ein Problem mit benutzerdefinierten Direktiven in Vue.directive gefunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!