Einführung in Vue.js: Rendering, Direktiven und Events

Avatar of Sarah Drasner
Sarah Drasner am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Wenn ich meine Erfahrungen mit Vue in einem Satz zusammenfassen müsste, würde ich wahrscheinlich so etwas sagen wie: „Es ist einfach so vernünftig“ oder „Es gibt mir die Werkzeuge, die ich brauche, wenn ich sie brauche, und hindert mich nie daran“. Immer wieder habe ich beim Erlernen von Vue innerlich gelächelt. Es war einfach schlüssig, elegant.

Dies ist *mein eigener* Einführungsansatz zu Vue. Es ist der Artikel, den ich mir gewünscht hätte, als ich Vue zum ersten Mal lernte. Wenn Sie einen neutraleren Ansatz bevorzugen, besuchen Sie bitte die sehr gut durchdachte und leicht verständliche Anleitung von Vue.

Artikelserie

  1. Rendering, Direktiven und Events (Sie sind hier!)
  2. Komponenten, Props und Slots
  3. Vue-cli
  4. Vuex
  5. Animationen

Eines meiner Lieblingsteile an Vue ist, dass es all die erfolgreichen Dinge aus anderen Frameworks aufgreift und sie integriert, ohne unübersichtlich zu werden. Einige Beispiele, die mir besonders auffallen:

  • Ein virtuelles DOM mit reaktiven Komponenten, die nur die View-Schicht bieten, Props und ein Redux-ähnlicher Store ähnlich wie bei React.
  • Bedingtes Rendering und Services, ähnlich wie bei Angular.
  • Inspiriert unter anderem von Polymer in Bezug auf Einfachheit und Leistung bietet Vue einen ähnlichen Entwicklungsstil, da HTML, Styles und JavaScript tandemmäßig komponiert werden.

Einige Vorteile, die ich gegenüber Vues Konkurrenten genossen habe: sauberere, semantischere API-Angebote, etwas bessere Leistung als React, keine Verwendung von Polyfills wie bei Polymer und eine isolierte, weniger meinungsbildende Ansicht als Angular, das ein MVC ist.

Ich könnte weitermachen, aber es ist wahrscheinlich besser, wenn Sie sich den umfassenden und Community-gesteuerten Vergleich mit anderen Frameworks ansehen. Es ist lesenswert, aber Sie können ihn später überspringen, wenn Sie sich in den Code vertiefen möchten.

Lassen Sie uns anfangen!

Wir können nicht ohne das obligatorische "Hallo, Welt!"-Beispiel beginnen. Machen wir das, damit Sie loslegen können

<div id="app">
 {{ text }} Nice to meet Vue.
</div>
new Vue({
 el: '#app',
 data: {
   text: 'Hello World!'
 }
});

Siehe den Stift Vue Hello World von Sarah Drasner (@sdras) auf CodePen.

Wenn Sie mit React vertraut sind, wird es einige Ähnlichkeiten geben. Wir sind mitten im Inhalt mit der Schnabelvorlage in JavaScript eingetaucht und haben eine Variable verwendet, aber ein Unterschied ist, dass wir mit reinem HTML und nicht mit JSX arbeiten. JSX ist ziemlich einfach zu handhaben, aber ich finde es schön, dass ich keine Zeit damit verbringen muss, `class` in `className` usw. zu ändern. Sie werden auch feststellen, dass dies ziemlich leichtgewichtig ist, um damit loszulegen.

Versuchen wir nun Vue mit etwas, das ich wirklich liebe: Schleifen und bedingtes Rendering.

Bedingtes Rendering

Nehmen wir an, ich habe eine Liste von Elementen, wie z. B. Navigation, von denen ich weiß, dass ich sie wiederverwenden werde. Es könnte sinnvoll sein, sie in ein Array zu packen, um sie dynamisch und konsistent an mehreren Stellen zu aktualisieren. In reinem JavaScript (mit Babel) würden wir vielleicht so etwas tun: das Array erstellen, dann einen leeren String erstellen, in dem wir jedes Element, verpackt in ein `

  • `, hinzufügen, und dann all das in ein `
      ` packen und es mit innerHTML zum DOM hinzufügen.

      <div id="container"></div>
      const items = [
  'thingie',
  'another thingie',
  'lots of stuff',
  'yadda yadda'
];

function listOfStuff() {
  let full_list = '';
  for (let i = 0; i < items.length; i++) {
      full_list = full_list + `<li> ${items[i]} </li>`
  }
  const contain = document.querySelector('#container');
  contain.innerHTML = `<ul> ${full_list} </ul>`;     
}

listOfStuff();

      Siehe den Stift e699f60b79b90a35401cc2bcbc588159 von Sarah Drasner (@sdras) auf CodePen.

      Das funktioniert gut, ist aber für etwas so Standardmäßiges etwas unübersichtlich. Nun implementieren wir dasselbe mit Vues Schleife mit `v-for`.

      <div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>
      const app4 = new Vue({
  el: '#app',
  data: {
    items: [
      'thingie',
      'another thingie',
      'lots of stuff',
      'yadda yadda'
    ]
  }
});

      Siehe den Stift Bedingtes Rendering in Vue von Sarah Drasner (@sdras) auf CodePen.

      Ziemlich sauber und deklarativ. Wenn Sie mit Angular vertraut sind, wird Ihnen das wahrscheinlich bekannt vorkommen. Ich finde dies eine sehr saubere und lesbare Art, bedingt zu rendern. Wenn Sie in den Code springen und ihn aktualisieren müssten, könnten Sie das sehr einfach tun.

      Ein weiteres wirklich schönes Angebot ist die dynamische Bindung mit v-model. Schauen Sie sich das an

      <div id="app">
  <h3>Type here:</h3>
  <textarea v-model="message" class="message" rows="5" maxlength="72"></textarea><br>
  <p class="booktext">{{ message }} </p>
</div>
      new Vue({
  el: '#app',
  data() {
    return {
      message: 'This is a good place to type things.'  
    }
  }
});

      Siehe den Stift Vue Book v-model basic von Sarah Drasner (@sdras) auf CodePen.

      Sie werden wahrscheinlich zwei Dinge an dieser Demo bemerken. Erstens, dass es absolut nichts gekostet hat, direkt in das Buch zu schreiben und den Text dynamisch zu aktualisieren. Vue ermöglicht uns, sehr einfach eine Zwei-Wege-Bindung zwischen dem `