Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue

Als Attribut- und Eigenschaftswert und zugehörige Verarbeitung in Vue.js

Attribut und Eigenschaft sind Konzepte, die in der Webentwicklung leicht verwechselt werden. Bei Werten ist dies aufgrund ihrer besonderen Natur sogar noch einfacher zu verwechseln. Dieser Artikel versucht, dies zu klären und zu veranschaulichen.

Der Begriff von Attribut und Eigenschaft

Einfach ausgedrückt ist Attribut das Attribut des Element-Tags und Eigenschaft das Attribut des Element-Objekts, zum Beispiel:

<input id="Eingabe" value="Testwert">
<Skript>
let input = document.getElementById('Eingabe');
console.log(input.getAttribute('value')); // Testwert
console.log(input.value); // Testwert
</Skript>

• Das Wertattribut der Eingabe wird durch value="Testwert" im Tag definiert, das durch input.getAttribute('value') abgerufen und durch input.setAttribute('value', 'Neuer Wert') aktualisiert werden kann.
• Die Werteigenschaft der Eingabe kann über input.value abgerufen und aktualisiert werden. Der Anfangswert stimmt mit dem im Attribut zugewiesenen Wert überein.

Attribut- und Eigenschaftsbindung

Wenn Sie den Attributwert zu Beginn aktualisieren, ändert sich auch der Eigenschaftswert.

Wenn Sie jedoch den Wert des Eigenschaftswerts aktualisieren (das Textfeld eingeben oder input.value einen neuen Wert zuweisen), ändert sich der Wert des Attributs nicht. Wenn Sie den Wert des Attributs erneut aktualisieren, ändert sich der Wert der Eigenschaft nicht, wie in dieser Animation gezeigt. Sie können auch diese Seite besuchen, um den Vorgang auszuprobieren.

Dies ist eigentlich das Dirty-Value-Flag in Aktion. Der Anfangswert des Dirty-Value-Flags ist „false“, was bedeutet, dass das Aktualisieren des Attributwerts standardmäßig den entsprechenden Eigenschaftswert ändert. Sobald der Benutzer jedoch mit dem Eigenschaftswert interagiert, wird der Wert des Dirty-Value-Flags „true“, was bedeutet, dass das Aktualisieren des Attributwerts den entsprechenden Eigenschaftswert nicht ändert.

In konkreten Projekten beschäftigen wir uns daher meist mit dem Wert einer Immobilie.

Wertverarbeitung durch Vue.js

Generell verwenden: Wert

Vue.js v-bind verarbeitet normalerweise Attribute. Wenn Sie es als Eigenschaft verarbeiten möchten, müssen Sie .prop hinzufügen

Allerdings verarbeitet v-bind:value normalerweise standardmäßig Eigenschaftswerte, da diese zwangsweise konvertiert werden müssen. Beispiel:

<input id="Eingabe" :value="'Testwert'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let Eingabe = neuer Vue({
  el: '#Eingabe',
  montiert () {
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value); // Testwert
    console.log(this._vnode.data) // {attrs: {id: "Eingabe"}, domProps: {Wert: "Testwert"}}
  }
});
</Skript>

Es ist ersichtlich, dass Vue.js in den Daten des VNode den Wert als Attribut von domProps und nicht das Attribut von attrs verwendet, sodass es nach dem Mounten zum Wert der Eigenschaft wird.

Im Vue.js-Quellcode wird die Eigenschaft der erzwungenen Konvertierung wie folgt behandelt:

// src/compiler/parser/index.js
Funktion Prozessattribute(el) {
...
        wenn ((Modifikatoren && Modifikatoren.prop) || (
          !el.component && platformMustUseProp(el.tag, el.attrsMap.type, Name)
        )) {
          addProp(el, Name, Wert, Liste[i], isDynamic)
        } anders {
          addAttr(el, Name, Wert, Liste[i], isDynamic)
        }

Die Definition von platformMustUseProp auf der Webplattform lautet wie folgt:

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('Eingabe, Textbereich, Option, Auswahl, Fortschritt')
export const mustUseProp = (Tag: Zeichenfolge, Typ: ?string, Attr: Zeichenfolge): boolean => {
  zurückkehren (
    (attr === 'Wert' und acceptValue(Tag)) und Typ !== 'Schaltfläche' ||
    (attr === „ausgewählt“ && tag === „Option“) ||
    (attr === 'geprüft' && tag === 'Eingabe') ||
    (attr === 'stummgeschaltet' && tag === 'Video')
  )
}

Wie oben zu sehen ist, wird der Wert von „input“, „textarea“, „option“, „select“ und „progress“, der kein Button ist, zwangsweise als Eigenschaft gespeichert und muss nicht auf „value.prop“ gesetzt werden.

Beispielsweise unterstützt das Textarea-Tag selbst das Value-Attribut nicht, sodass der Wert im folgenden Code nicht im mehrzeiligen Textfeld angezeigt wird

<textarea value="Testwert"></textarea>

Aber in Vue.js kann der folgende Code erfolgreich an die Werteigenschaft gebunden und in einem mehrzeiligen Textfeld angezeigt werden:

<textarea :value="'Testwert'"></textarea>

Sonderfall Verwendung: value.prop

Eine weitere Sache, die beim obigen Vue.js-Quellcode zu beachten ist, ist, dass er, wenn er gezwungen wird, eine Eigenschaft zu sein, auch !el.component erfüllen muss, d. h., er ist keine dynamische Komponente, da der Wert von el.component einer dynamischen Komponente der Wert ihres is-Attributs ist

Das heißt, das v-bind von dynamischen Komponenten wird standardmäßig als Attribut verwendet. Wenn Sie es als Eigenschaft verwenden möchten, müssen Sie .prop verwenden, zum Beispiel:

<div id="app">
  <Komponente :is="element" :value.prop="'Testwert'"></Komponente>
  <button @click="change">Ändern</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
  el: '#app',
  Daten: {
    Element: "Eingabe"
  },
  Methoden: {
    ändern () {
      dieses.Element = 'Eingabe' === dieses.Element ? 'Textbereich' : 'Eingabe';
    }
  }
});
</Skript>

Wenn Sie die .prop von :value.prop in der obigen Komponente löschen und zum Textbereich wechseln, wird dessen Wert nicht im mehrzeiligen Textfeld angezeigt. Sie können auf dieser Seite auf die Schalterbeschriftung klicken, um ihn anzuzeigen.

Zusammenfassen

• Die Bindungsbeziehung zwischen dem Attribut und dem Eigenschaftswert wird ungültig, nachdem der Benutzer interagiert und den Wert aktualisiert.
• Vue.js verwendet im Allgemeinen: value, um value zu einer Eigenschaft zu machen
• Dynamische Vue.js-Vorlagen müssen Folgendes verwenden: value.prop, um den Wert zu einer Eigenschaft zu machen

Dies ist das Ende dieses Artikels über die spezifische Verwendung und Unterschiede von Attributen und Eigenschaften in Vue. Weitere relevante Inhalte zu Vue-Attributeigenschaften finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!