Clever Geek Handbook

Vue.js für Anfänger Lektion 2: Attributbindung

Dies ist die zweite Lektion des Vue.js-Tutorials für Anfänger, die von Natalia Teplukhina, Staff Engineer bei Gitlab und Mitglied des Kernteams des Vue-Frameworks empfohlen wird (Q / A-Sitzung mit Natasha fand auf unserem Instagram statt , und Sie können das Transkript hier lesen ).



In der zweiten Lektion werden wir sprechen Informationen zur Attributbindung und zum Verbinden von in einer Vue-Instanz gespeicherten Daten mit Attributen von HTML-Elementen. → Erste Lektion











Der Zweck der Lektion



Hier sehen wir uns an, wie ein Bild angezeigt und der Attributtext mithilfe der Attributbindung festgelegt wird alt. Wir werden die relevanten Daten aus der Vue-Instanz entnehmen.



Anfangscode



Beginnen wir mit index.htmldem <body>folgenden HTML-Code, der sich in der Datei im Tag befindet : 



<div id="app">

  <div class="product">

    <div class="product-image">
      <img src="" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>

  </div>
</div>


Achten Sie auf das Tag <div>mit der Klasse product-image. Es enthält das Element, <img>an das wir die zur Anzeige des Bildes erforderlichen Daten dynamisch binden möchten.



Ein Element <div>mit einer Klasse wird product-infoverwendet, um den Namen eines Produkts anzuzeigen.



Hier ist das in der Datei enthaltene JavaScript main.js: 



var app = new Vue({
    el: '#app',
    data: {
        product: "Socks",
        image: "./assets/vmSocks-green.jpg"
    }
})


Beachten Sie, dass das Objekt datajetzt eine neue Eigenschaft hat, imagedie den Pfad zum Bild enthält.



→ Das in diesem Tutorial verwendete CSS finden Sie hier .



Fügen Sie index.htmldem Tag <head>Folgendes hinzu , um den Stil zu verbinden : 



<link rel="stylesheet" type="text/css" href="style.css"


Hier gehen wir von der Annahme aus, dass die Stildatei einen Namen hat style.cssund im selben Ordner wie gespeichert ist index.html.



Hier ist das Bild, das wir auf der Seite anzeigen werden.



Eine Aufgabe



Wir brauchen ein Bild, um auf der Seite angezeigt zu werden. Dabei wollen wir dieses Bild dynamisch manipulieren. Das heißt, wir müssen in der Lage sein, den Pfad zu dem in der Vue-Instanz gespeicherten Bild zu ändern und die Ergebnisse dieser Änderungen sofort auf der Seite anzuzeigen. Da es das srcElementattribut <img>ist, das für das Bild verantwortlich ist, das das Element anzeigt, müssen wir einige Daten an dieses Attribut binden. Auf diese Weise können wir das Bild basierend auf den in der Vue-Instanz gespeicherten Daten dynamisch ändern.



Ein wichtiger Begriff: Datenbindung



Wenn wir über Datenbindung in Vue sprechen, ist der Punkt, dass die Stelle in der Vorlage, an der die Daten verwendet oder angezeigt werden, direkt mit der Datenquelle "verbunden" oder "verknüpft" ist, dh mit dem entsprechenden in der Instanz gespeicherten Objekt Vue.



Mit anderen Worten, die Datenquellenentität ist der Entität, in der diese Daten verwendet werden, der Datensenke zugeordnet. In unserem Fall ist die Datenquelle eine Vue-Instanz und die Senke ein Attribut des srcElements <img>.



Die Lösung des Problems



Um einen Eigenschaftswert imagevon einem Datenobjekt an eine srcTag- Eigenschaft zu binden <img>, verwenden wir die Vue-Direktive v-bind. Schreiben wir den Tag-Code <img>aus der Datei neu index.html: 



<img v-bind:src="image" />


Wenn Vue während der Verarbeitung einer Seite eine solche Konstruktion sieht, ersetzt das Framework diese durch den folgenden HTML-Code: 



<img src="./assets/vmSocks-green.jpg" />


Wenn alles richtig gemacht wurde, wird ein Bild auf der Seite angezeigt.





Das Bild der grünen Socken wird auf der Seite angezeigt.



Wenn Sie den Wert derimageObjekteigenschaftdataändernsrc,ändert sich der Attributwert entsprechend, wodurch ein neues Bild auf der Seite angezeigt wird.



Nehmen wir an, wir möchten die grünen Socken durch die blauen ersetzen. Da der Pfad zur Datei mit dem neuen Bild wie folgt aussieht./assets/vmSocks-blue.jpg(die Bilddatei finden Sie hier ), reicht es aus, den Eigenschaftsbeschreibungscodeimageim Objektdatain dieses Formular zu bringen: 



image: "./assets/vmSocks-blue.jpg"


Dadurch wird das Bild der blauen Socken auf der Seite angezeigt.





Das Bild der blauen Socken wird auf der Seite angezeigt



Zusätzliche Anwendungsfälle für v-bind



Die Direktive v-bindkann nicht nur mit einem Attribut verwendet werden src. Es kann uns auch helfen, das Bildattribut dynamisch anzupassen alt.



Fügen wir dem Objekt eine dataneue Eigenschaft mit folgenden Optionen hinzu altText: 



altText: "A pair of socks"


Binden wir die entsprechenden Daten an das Attribut altund bringen den Elementcode <img>in dieses Formular: 



<img v-bind:src="image" v-bind:alt="altText" />


Hier wird wie im Fall des Attributs srcdas Konstrukt verwendet, das aus einem v-bindDoppelpunkt und dem Attributnamen ( alt) besteht.



Wenn sich nun die Eigenschaften der Vue-Instanz ändern imageoder altText, werden die <img>aktualisierten Daten in den entsprechenden Elementattributen angezeigt . Dadurch wird die Verbindung zwischen den Attributen des Elements und den in der Vue-Instanz gespeicherten Daten nicht unterbrochen.



Diese Technik wird bei der Entwicklung von Vue-Anwendungen ständig angewendet. Aus diesem Grund gibt es eine abgekürzte Version des Konstruktionsprotokolls v-bind:. Es sieht aus wie :. Wenn Sie diese Technik beim Schreiben von Tag-Code verwenden <img>, erhalten Sie Folgendes: 



<img :src="image" />


Es ist einfach und bequem. Diese Technik verbessert die Sauberkeit des Codes.



Werkstatt



Fügen Sie der Seite einen Link (Element <a>) mit Text hinzu More products like this. dataErstellen Sie im Objekt eine Eigenschaft, linkdie den Link enthält https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Binden Sie mithilfe einer Direktive v-bindeine Eigenschaft linkan ein Attribut eines hrefElements <a>.



→ Hier ist eine Vorlage, mit der Sie dieses Problem lösen können.



→ Hier ist die Lösung des Problems.



Ergebnis



Folgendes haben wir heute gelernt:



  • Die in der Vue-Instanz gespeicherten Daten können an HTML-Attribute gebunden werden.
  • Die Direktive wird verwendet, um Daten an Attribute zu binden v-bind. Die Abkürzung für diese Direktive ist Doppelpunkt ( :).
  • Ein Attributname, der auf einen Doppelpunkt folgt, gibt das Attribut an, an das die Daten gebunden sind.
  • Als Wert des in Anführungszeichen angegebenen Attributs wird der Name des Schlüssels verwendet, anhand dessen Sie die mit dem Attribut verbundenen Daten finden können.


Wenn Sie an diesem Kurs teilnehmen, bitten wir Sie, uns mitzuteilen, in welcher Umgebung Sie Ihre Hausaufgaben machen.



→ Teil 1: Instanziieren von Vue

→ Teil 2: Attributbindung in Vue





More articles:


All Articles